Javascript 使用三个js创建圆环图

我试图创建一个圆环图，其中有不同宽度的不同颜色段（取决于数据大小），基本上是一个看起来更好的饼图

是否可以使用环面几何进行此操作，或者最好将线段创建为形状并使用凸出几何

在威瑟的情况下，最好的方法是什么

编辑

我通过圆环几何体实现了这一点，如：

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

var-prevAngle=0；
对于（变量i=0；i

但是当我渲染它时（数据中有4个对象，大小为0.25），我只得到圆环的上半部分（半圆环？）

---

旋转是否正确？

您可以查看以下示例：

如您所见，

TorusGeometry

的最后一个参数是

arc

，您可以使用它将饼图的线段直接映射到环面几何体的线段

工作解决方案

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

var-prevAngle=0；
var material=新的三个.MeshPhongmaterial（{materialOptions}）；
var graphContainer=new THREE.Object3D（）；
graphContainer.castShadow=false；
对于（变量i=0；i

假设我有4个25%的分段，我是否需要创建4个具有圆环几何体的网格，并将每个几何体的圆弧设置为pi/2、pi、3*pi/2、2pi？您必须创建4个具有pi/2圆弧的分段，并适当旋转网格（第一个为0度，第二个为pi/2度，第三个为pi度，第四个为3*pi/2度）在你的代码中，你应该做：

prevAngle+=angle

否则所有几何体子部分都会彼此重叠。此外，如果

materialOptions

对于每个

i

都是相同的，那么您可以将调用移动到

THREE.MeshPhongmaterial

外部for循环以提高性能。我一发布此消息就注意到缺少+=。