Three.js 可变半径管

标签 three.js

我正在尝试沿着路径绘制一根 pipe ,而 TubeGeometry 对象似乎就是为此而设计的。然而,有一个问题 - 我还希望半径沿着路径的每个点都是可变的。基本上,我正在尝试绘制一个可变宽度的管。

我可以使用多个 pipe 和圆柱体来绘制它,但我忍不住认为必须有更好的方法。

最佳答案

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

  1. 修改了构造函数参数 radius,以采用表示每个控制点处半径的数字数组。
  2. 修改后的代码如下(引入 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);

        }
    }

关于Three.js 可变半径管,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20955852/

相关文章:

javascript - 在 Three.js 中的网格上分配非插值颜色

3d - 将模型从3dStudioMax导入THREE.js

javascript - 在 Three.js 渲染上滚动时如何更新 z 值?

javascript - Three.js 将相机距离移动到物体 z

javascript - 如何处理资源的异步加载?立即访问返回未定义

javascript - 加载图像时,getImageData 提供一些零

javascript - 将高度图应用于 three.js 中的 SphereGeometry

node.js - node.js 中的 httpServer 服务于 three.js

memory - 三.JS:纹理mipmaps和webGL的引用

Three.js 黑视频 CORS 问题?