在three.js中画一个和弦，就像在d3.js中

Question

我开始学习three.js，并希望在d3.js中尽可能地创建一个chord图，但要从头开始。我创建了一个场景，在xz轴上有圆圈段。但我被和弦卡住了。我查阅了d3.js代码(path+quadratic曲线)，但需要一些很好的示例或说明如何在three.js中实现它。

我想做的是让和弦与笔画和填充我的圆圈段，在两端有不同的宽度，在中间很好地弯曲和更薄(和D3.js一样)，在将来设置z指数和不透明度。

举个例子会很有帮助的，谢谢。

我想实现这样的目标：

Answer 1

好吧，我自己找到了解决办法。

事情是这样的：

// create shape
shape = new THREE.Shape();

// move it to first point of the chord
shape.moveTo(0+(RADIUS-2)*Math.cos(-1.4639537206164), 0+(RADIUS-2)*Math.sin(-1.4639537206164));

// create all the parts afterward
shape.absarc(0, 0, (RADIUS-2), -1.4639537206164, -1.3041396376011, true);
shape.quadraticCurveTo(0, 0, 0+(RADIUS-2)*Math.cos(4.5262534414805), 0+(RADIUS-2)*Math.sin(4.5262534414805));
shape.absarc(0, 0, (RADIUS-2), 4.5262534414805, 4.6513392175639, true);
shape.quadraticCurveTo(0, 0, 0+(RADIUS-2)*Math.cos(-1.4639537206164), 0+(RADIUS-2)*Math.sin(-1.4639537206164));

// create geometry
geometry = new THREE.ShapeGeometry( shape );
// create mesh
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide } ) ) ;
// rotate
mesh.rotation.x = 90 * Math.PI/180;
// add to scene
scene.add( mesh );

1)创建形状对象

2)将偏移移到弧的第一个点。

( 3)创建与圆相同中心，半径较小的圆弧(第一点的起始角，第二端角)。

( 4)采用二次曲线与控制点(圆心)和第三点。

( 5)使用圆弧的方式和以前一样

6)具有二次曲线和最后一点的完全形状。

7)设定几何学，材料，添加到场景中