What is preventing me from creating a perfect circle using the arc() method in Three.js?

Question

What is preventing me from creating a perfect circle using the arc() method in Three.js?

While attempting to create a complex shape in Three.js using extruded arcs, I encountered some unexpected behavior. I am unsure if my understanding of the API is lacking, but wasn't this code supposed to generate a full extruded circle with a radius of 100 centered at the origin?

var path = new THREE.Path();

path.moveTo(0, 0);
path.arc(0, 0, 100, 0, Math.PI * 2, false);

var shape = path.toShapes(false, false);

var extrudeSettings = {
    amount : 20,
    steps : 1
};

var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

var mesh = new THREE.Mesh(geometry, material);

Instead of a complete circle, it produces a Pacman-like shape:

For reference, here's the link to the JSFiddle:

http://jsfiddle.net/c8shqzpn/

javascript three.js

Answer 1

Answer №1

If you're looking to create a circle shape for extrusion, there are a few important steps to keep in mind.

When drawing an arc, it's crucial to connect the start of the arc to the current point. In order to achieve this in your specific case, you will need to utilize the moveTo() command to establish the starting point on the edge of the circle.

var myCircle = new THREE.Shape();

myCircle.moveTo( circleRadius, 0 );
myCircle.absarc( 0, 0, circleRadius, 0, 2 * Math.PI, false );

This code snippet is compatible with three.js version r.70.

Answer 2

If you're looking to create a circle shape for extrusion, there are a few important steps to keep in mind.

When drawing an arc, it's crucial to connect the start of the arc to the current point. In order to achieve this in your specific case, you will need to utilize the moveTo() command to establish the starting point on the edge of the circle.

var myCircle = new THREE.Shape();

myCircle.moveTo( circleRadius, 0 );
myCircle.absarc( 0, 0, circleRadius, 0, 2 * Math.PI, false );

This code snippet is compatible with three.js version r.70.

Answer 3

Answer №2

Encountering a similar issue with drawing and extruding 3/4 of a circle, I noticed that a segment was missing when the result (a THREE.Mesh) was added to the screen. By including the line moveTo( x, y ) where x and y represent the starting coordinates of the arc, I was able to resolve the problem. Below is the code snippet I utilized:

var extrudeSettings = {
    bevelEnabled: false,
    steps: 1,
    amount: 2
};

var shape = new THREE.Shape();
var circleRadius = 4;

// THIS LINE SOLVES THE ISSUE 
shape.moveTo( 0, -circleRadius );

shape.absarc( 0, 0, circleRadius, 0, 1.5 * Math.PI, false );
shape.lineTo( 0, 0 );
shape.closePath();

var geometry = shape.extrude( extrudeSettings );

scene.add( new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() ) );

Initially, my mesh appeared as shown here:

https://i.sstatic.net/PHFt8.png

After implementing

shape.moveTo( 0, -circleRadius );

, the mesh transformed into this:

https://i.sstatic.net/df8Ww.png

Answer 4

Encountering a similar issue with drawing and extruding 3/4 of a circle, I noticed that a segment was missing when the result (a THREE.Mesh) was added to the screen. By including the line moveTo( x, y ) where x and y represent the starting coordinates of the arc, I was able to resolve the problem. Below is the code snippet I utilized:

var extrudeSettings = {
    bevelEnabled: false,
    steps: 1,
    amount: 2
};

var shape = new THREE.Shape();
var circleRadius = 4;

// THIS LINE SOLVES THE ISSUE 
shape.moveTo( 0, -circleRadius );

shape.absarc( 0, 0, circleRadius, 0, 1.5 * Math.PI, false );
shape.lineTo( 0, 0 );
shape.closePath();

var geometry = shape.extrude( extrudeSettings );

scene.add( new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() ) );

Initially, my mesh appeared as shown here:

https://i.sstatic.net/PHFt8.png

After implementing

shape.moveTo( 0, -circleRadius );

, the mesh transformed into this:

https://i.sstatic.net/df8Ww.png

Answer 5

Answer №3

Is it possible to find the solution by multiplying 2.1 with Math.PI instead of 2?

Answer 6

Is it possible to find the solution by multiplying 2.1 with Math.PI instead of 2?

What is preventing me from creating a perfect circle using the arc() method in Three.js?

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to send an array using fetch in JavaScript?

Experiencing difficulties with a callback function while making a jQuery getJSON request via AJAX

Unable to launch React Native project on emulator now

Margins are added to cards on the right side

Storing the ID passed from Next.js/Link into Next.js

Which file should I include: npm-shrinkwrap.json, package-lock.json, or yarn.lock?

Troubleshooting problem with jwPlayer resizing in Firefox and Opera browsers

Interactive feature on Google Maps information window allowing navigation to page's functions

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS

Three.js experiencing issues with FBX animations running erratically

Error alert is triggered when AJAX launch fails, but a successful response is received in the form of an array converted to a

Difficulty in using window.scrollTo within useEffect in reactJS

The alert function in the Ajax web method is malfunctioning

Disable the border and background colors in CloudFlare Turnstile

Using Observables to assign values received from API calls to each element during loop iterations

Validating Two DateTime Pickers as a Group with Javascript in asp.net

Can users' data be securely stored in the session/history using ReactJS?

Mongo: executing queries with both .find() and .update() methods sequentially

What methods can I use to accomplish the transformation of superimposed images?

Avoid navigating to the subscribe block when the server sends a response in Angular