three.js - 可变半径的three.js管

我试图沿路径绘制管，并且似乎为此创建了TubeGeometry对象。但是，有一个陷阱-我也希望半径沿路径的每个点是可变的。基本上，我正在尝试绘制可变宽度的管。

我可以使用多个管和圆柱体来绘制此图，但是我不禁认为必须有更好的方法。

最佳答案

WestLangley的建议效果很好。我最终基于THREE.TubeGeometry创建了一个带有以下修改（R59）的类：


修改了构造函数的参数radius，以一个数字数组表示每个控制点的半径。
修改后的代码如下所示（引入posRadius变量并替换为radius）：

    for (i = 0; i < numpoints; i++) {
        this.grid[i] = [];

        u = i / (numpoints - 1);

        pos = path.getPointAt(u);
        var posRadius = this.radius[Math.floor((this.radius.length - 1) * u)];

        tangent = tangents[i];
        normal = normals[i];
        binormal = binormals[i];

        for (j = 0; j < this.radialSegments; j++) {

            v = j / this.radialSegments * 2 * Math.PI;
            // TODO: Hack: Negating it so it faces outside.
            cx = -posRadius * Math.cos(v);
            cy = posRadius * Math.sin(v);

            pos2.copy(pos);
            pos2.x += cx * normal.x + cy * binormal.x;
            pos2.y += cx * normal.y + cy * binormal.y;
            pos2.z += cx * normal.z + cy * binormal.z;

            this.grid[i][j] = vert(pos2.x, pos2.y, pos2.z);

        }
    }