CODEWITHSUNDEEP
javascriptgraphthree.js
matts1189
matts1189

Reputation: 197

Create torus graph using three js

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?

Upvotes: 0

Views: 1645

Answers (2)

matts1189
matts1189

Reputation: 197

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);

Upvotes: 1

gaitat
gaitat

Reputation: 12642

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.

Upvotes: 1

Related Questions