How to extrude a Circle Geometry in Three.js?

Question

How to extrude a quarter Circle Geometry (THREE.CircleGeometry) in Three.js?

I create the quarter circle like this:

var circle = new THREE.Mesh( 
    new THREE.CircleGeometry( 25, 32, 0, Math.PI/2 ), 
    new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide })
);
scene.add( circle );

But I want it extruded not just a plane, I just found THREE.ExtrudeGeometry but don't know if I can use it for my purposes or how.

Answer 1

Here's an example of how to extrude a shape, in this case a triangle along a straight line. It's pretty much what the Shape class is meant for. https://jsfiddle.net/wb412ymk/

// Create a 2D triangular shape
// The Shape() class has methods for drawing a 2D shape
var triangleShape = new THREE.Shape();
triangleShape.moveTo(-2, -2);
triangleShape.lineTo(0, 2);
triangleShape.lineTo(2, -2);
triangleShape.lineTo(-2, -2);

// Create a new geometry by extruding the triangleShape
// The option: 'amount' is how far to extrude, 'bevelEnabled: false' prevents beveling
var extrudedGeometry = new THREE.ExtrudeGeometry(triangleShape, {amount: 5, bevelEnabled: false});

// Geometry doesn't do much on its own, we need to create a Mesh from it
var extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({color: 0xff0000}));
scene.add(extrudedMesh);

The key concepts here:

• The 2D shape can be anything you can draw with the Shape class
• ExtrudeGeometry() can easily extrude along a straight line using the amount option and disabling bevelEnabled. If you want a complex extrude path, try SplineCurve3.
• ExtrudeGeometry() returns raw geometry, in other words an array of Vector3 points. It doesn't do much on its own until you use it to construct a Mesh along with a Material.

Read more on the THREE.js documentation:

https://threejs.org/docs/#api/extras/core/Shape

https://threejs.org/docs/#api/geometries/ExtrudeGeometry