Create torus graph using three js

Question

I'm trying to create a torus graph where there are different coloured segments of different widths (depending on the data size), basically a pie graph that looks nicer.

Is it possible to do this using torus geometry or would it be best to create the segments as shapes and use exctrudegeometry?

In wither case, what's the best way of doing this?

Edit

I have implemented this via torus geometry like:

var prevAngle = 0;
for(var i = 0; i < data.length; i++){
    var mat = new THREE.MeshPhongmaterial({materialOptions});
    var angle = 2* Math.PI * data[i].size //size is decimal
    var geo = new THREE.TorusGeometry(500, 200, 8, 6, angle);
    var mesh = new THREE.Mesh(geo, mat);
    mesh.rotation.z = prevAngle;
    scene.add(mesh);
    prevAngle = angle;
}

But when I render this (with 4 objects in data with size 0.25) I only get the top half of the torus (semi-torus?).

is the rotation correct?

gaitat · Accepted Answer · 2015-09-14 12:44:27Z

1

You can look at the example at https://github.com/josdirksen/learning-threejs/blob/master/chapter-05/07-basic-3d-geometries-torus.html

As you can see, the last argument to the TorusGeometry is the arc which you can use to directly map the segments of your pie graph to segments of a torus geometry.

answered Sep 14, 2015 at 12:44

gaitat

12.7k5 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

matts1189 Over a year ago

So say I had 4 segments of 25% each, would I need to create 4 meshes with torus geometry and set the arc of each geometry to pi/2, pi, 3*pi/2, 2pi?

gaitat Over a year ago

you would have to create 4 segments with an arc of pi/2 and rotate the meshes appropriately (1st one 0 degrees, 2nd one pi/2 degrees, 3rd one pi degrees and 4th one 3*pi/2 degrees) to have them fall on the right place.

gaitat Over a year ago

in your code you should be doing: prevAngle += angle; otherwise all geometry subsection will fall on top of each other.

gaitat Over a year ago

in addition, if materialOptions is the same for each i then you can move the call to THREE.MeshPhongmaterial outside the for-loop for improved performance.

matts1189 Over a year ago

I noticed the missing += as soon as I'd posted this.

matts1189 · Accepted Answer · 2015-09-16 12:34:38Z

1

Working solution

var prevAngle = 0;
var material = new THREE.MeshPhongmaterial({materialOptions});
var graphContainer = new THREE.Object3D();
graphContainer.castShadow = false;

for(var i = 0; i < data.length; i++){
    var mat = material.clone();
    mat.color = new THREE.Color(this.coloursArray[i]); //colorsArray = ['#46adad', ...]

    var angle = 2* Math.PI * data[i].size //size is decimal
    var geo = new THREE.TorusGeometry(500, 200, 8, 6, angle);
    var mesh = new THREE.Mesh(geo, mat);

    mesh.rotation.z = prevAngle;
    graphContainer.add(mesh);
    prevAngle += angle;
}
this.scene.add(graphContainer);

answered Sep 16, 2015 at 12:34

matts1189

2071 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

Create torus graph using three js

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related