使用三個j創建圓環圖

我想創建一個圓環圖，其中有不同寬度的不同彩色段（取決於數據大小），基本上看起來更好的餅圖。使用三個j創建圓環圖

是否可以使用圓環幾何來做到這一點，或者最好是將這些段創建爲形狀並使用exctrudegeometry？

在枯萎的情況下，這樣做的最好方法是什麼？

編輯

我已經通過環面的幾何形狀等來實現的：

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

但是，當我使這個（與數據4個對象與大小0.25）我只得到的上半部分圓環（半圓環？）。

是否正確？

來源

2015-09-14 matts1189

你可以看一下例子在https://github.com/josdirksen/learning-threejs/blob/master/chapter-05/07-basic-3d-geometries-torus.html

正如你所看到的，最後一個參數TorusGeometry是arc，您可以使用您的餅圖的部分直接映射到一個圓環形狀的部分。

來源

2015-09-14 12:44:27 gaitat

所以說我非常的各25％4段，我需要創建4個網格與圓環形狀，並設置每個幾何到pi/2，PI，3 * pi的圓弧/ 2,2pi？ – matts1189

你將不得不創建4段pi/2的圓弧並適當旋轉網格（第1個0度，第2個pi/2度，第3個pi度和第4個3 * pi/2度）以使它們落在正確的地方。 – gaitat

在你的代碼中你應該這樣做：'prevAngle + = angle;'否則所有的幾何子部分將會相互重疊。 – gaitat

工作液

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

來源

2015-09-16 12:34:38 matts1189

使用三個j創建圓環圖

回答

相關問題