I'm trying to draw a plex 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 plete 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:

/

I'm trying to draw a plex 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 plete 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/c8shqzpn/

• javascript
• three.js

• As a work-around, try an approach in threejs/examples/webgl_geometry_shapes.html. – WestLangley Commented Jan 18, 2015 at 17:20
• I'm trying to draw a more plicated path with arcs and it's failing miserably. If it can't do this simple test case of drawing a circle then there's no hope for it working correctly for my plicated path. The circle on that page seems to be using a quadratic path, which may work for me. – thenickdude Commented Jan 19, 2015 at 1:29
• jsfiddle/19f7qssj - The path is closed when using quadratic curves, but it isn't a circle (as they can't be represented by quadratic bezier curves spencermortensen./articles/bezier-circle) Probably good enough, though. – thenickdude Commented Jan 19, 2015 at 1:40
• 1 jsfiddle/19f7qssj/1 or jsfiddle/c8shqzpn/1 – WestLangley Commented Jan 19, 2015 at 2:50
• WestLangley, please post that as answer so I can accept it! I'm puzzled by why the current position forms part of the arc, it seems like the centre point, start angle, end angle and direction provided to arc() pletely define the curve and the current position should be irrelevant? – thenickdude Commented Jan 19, 2015 at 12:05

3 Answers 3

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

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:

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