javascript - 如何旋转THREE.TubeGeometry段？

我创建了一个平面THREE.TubeGeometry，其radiusSegments = 2，当添加到场景中时，它垂直于地面：



是否可以旋转每个管段，使其与地面平行？

JSFiddle example.

var points = [];
for (var i = 0; i < 5; i++) {
   var randomY = i*5/2*10 + -50;
   var randomX = 15*Math.sin(5*i);
   points.push(new THREE.Vector3(randomX, randomY, 0));
}
var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), 64, 6, 2, false);
tubeMesh = createMesh(tubeGeometry);
scene.add(tubeMesh);

最佳答案

我的建议是使用自定义的平面几何图形（而不是TubeGeometry！），并计算您想要的顶点（不旋转！）。

获取几何图形的方法类似于：


创建随机点（这里需要一些数学运算才能使它们位于您想要的位置，但这是有趣的部分！）
从每个曲线获取样条曲线点
对它们进行三角剖分


如果您决定在此处继续执行代码，请进行更改以使其与平面平行。在tubeMesh创建之后，添加到generateTube函数：

tubeMesh.rotateY(Math.PI/2);