Why can't I draw a complete circle with arc() in Three.js?

问题

I'm trying to draw a complex shape in Three.js using extruded arcs but they just didn't seem to be behaving properly. I don't know if I don't understand the API, but shouldn't this create a complete extruded circle of radius 100 centred 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 it draws a Pacman shape:

Here's the JSFiddle:

http://jsfiddle.net/c8shqzpn/

回答1:

You want to create a circle shape so you can extrude it.

Whenever you draw an arc, it connects the start of the arc to the current point, so in your case, you have to use the moveTo() command to set the start point on the perimeter of the circle.

var shape = new THREE.Shape();

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

three.js r.70

回答2:

I had similar issues drawing 3/4 of a circle and extruding it and adding the result (a THREE.Mesh) to the screen. The circle seemed to miss a segment. Adding moveTo( x, y ) where x, y are coordinates of the beginning of the arc solved the issue. I used this code:

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() ) );

First my mesh looked like this:

After adding shape.moveTo( 0, -circleRadius ); the mesh looked like this:

回答3:

Could it be solved if you multiply Math.PI bye 2.1, instead of 2?

来源：https://stackoverflow.com/questions/28008608/why-cant-i-draw-a-complete-circle-with-arc-in-three-js

标签

javascript

three.js