What is the simplest way to draw a cylinder with a slice cut out of it with three.js?

Question

I was wondering how you would draw a cylinder with a slice cut out of it using three.js i.e. something like this: Image

All replies are much appreciated.

Answer 1

Probably the easiest way to get the shape you want is to extrude a THREE.Shape like so:

var settings = {
    amount: 2,
    steps : 1,
    bevelEnabled: false,
    curveSegments: 24
};

var shape = new THREE.Shape();
shape.moveTo( 0, 0 );
shape.absarc( 0, 0, 10, 0, Math.PI * 1.75, false );
shape.moveTo( 0, 0 );

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

fiddle: http://jsfiddle.net/0yyg5ese/

three.js r.73

Answer 2

Use a THREE.CylinderGeometry and set the thetaLength-parameter. The default is 2 * Pi, which makes for a complete cylinder. I have built a fiddle that looks like your Image: http://jsfiddle.net/hvgropoa/.

Downside: the slice´s faces ar missing, so you can see inside the cylinder when looking inside the cut :( However this is the simplest way, if you need a closed Cylinder I suggest doing it with THREE.CSG.