具有可变半径的three.js管

时间:2014-01-06 17:39:10

标签: three.js

我试图沿路径绘制一个管子,而TubeGeometry对象似乎是为此而制作的。然而,有一个问题 - 我也希望半径沿着路径的每个点变化。基本上,我正在尝试绘制一个可变宽度的管。

我可以用多个管子和圆筒画出来,但我不禁想到必须有更好的方法。

1 个答案:

答案 0 :(得分:6)

WestLangley的建议很有效。我最终创建了一个基于THREE.TubeGeometry的类,并进行了以下修改(R59):

  1. 修改构造函数参数radius以获取表示每个控制点处半径的数字数组。
  2. 修改后的代码如下所示(引入了posRadius变量并替换了radius):
  3.     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);
    
            }
        }