CODEWITHSUNDEEP
javascriptthree.js
Tristan Ferrua Edwardsson
Tristan Ferrua Edwardsson

Reputation: 333

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

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.

Upvotes: 1

Views: 1257

Answers (3)

Prytin Mine
Prytin Mine

Reputation: 21

After also looking for the answer, this worked out for me.

    // Create shape
    var cake_shape = new THREE.Shape();
    // Start from the center
    cake_shape.lineTo( 0, 0 );
    // Create an elipse 
    cake_shape.ellipse( 0, 0, 1, 1 , 0 , Math.PI * 1.75 );
    // Go back to the center
    cake_shape.lineTo( 0, 0 );
    
    // Create an extruded geometry with the previous shape, and define its 
    // depth (height of the cake)
    var cake_geometry = new THREE.ExtrudeGeometry( cake_shape, { curveSegments: 10, depth: 0.5, bevelEnabled: true} );
    let cake = new THREE.Mesh(cake_geometry, cake_material);

enter image description here

Other ways such as defining a cylinderGeometry with incomplete circle just creates a pie where you can see the insides, not the wanted effect usualy.

Hope it helps future people looking for this.

Upvotes: 0

WestLangley
WestLangley

Reputation: 104843

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

Upvotes: 2

Falk Thiele
Falk Thiele

Reputation: 4494

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.

Upvotes: 0

Related Questions