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

Question

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/

Answer 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