CODEWITHSUNDEEP
three.js
bajro
bajro

Reputation: 1250

Make CylinderGeometry non-hollow

I want to draw a normal pie chart with three.js and went with the CylinderGeometry to do that. The problem is, that I want to animate my pie chart. Like if someone clicks on a segment of the pie chart, it should slide out of the pie chart.

The problem is, that this geometry is hollow in the inside! Is there a way to make the CylinderGeometry solid (non-hollow)? (I know I could draw my own pie chart but I want to know if there is a possibility to do it with the CylinderGeometry?)

Upvotes: 1

Views: 854

Answers (2)

prisoner849
prisoner849

Reputation: 17586

LatheGeometry() or ExtrudeGeometry() will help you to build segments of a cylinder. But as you want a non-hollow segments, then ExtrudeGeometry() is your choise.

jsfiddle example

Upvotes: 2

bajro
bajro

Reputation: 1250

This is an outtake of my code. I am iterating over a json file to get the data, and then this code snippet creates multiple segments.

var segment = new THREE.Mesh(new THREE.ExtrudeGeometry(new THREE.CylinderGeometry(5,5,1.5,50,50,false,lastThetaStart,(Math.PI*2)*(jsonData[data].percent/100)),
        {amount: 100, steps: 100, bevelEnabled  : false}),
        new THREE.MeshPhongMaterial({
            color: Math.random() * 0xffffff,
            shading: THREE.SmoothShading,
            specular: 0xffffff,
            shininess: 3,
        }));

But as soon as I execute the file within my example.html, it gives me the following error:

three.js:26099 Uncaught TypeError: shape.extractPoints is not a function(…)

Upvotes: 0

Related Questions