有没有办法创建具有宽度和厚度的 Three.js 3D 线系列？

尽管 Three.js 线对象支持线宽，但 WebGL 中所有平台上的所有浏览器尚不支持此属性。

这是在 Three.js 中设置线宽的地方:

    var material = new THREE.LineBasicMaterial({
        color: 0xff0000,
        linewidth: 5
    });

具有宽度的 Three.js 功能区对象最近已被删除。

Three.js 管对象生成 3D 挤压，但基于贝塞尔曲线的线条不会通过控制点。

谁能想到一种在 Three.js 中绘制具有某种用户可定义的“体积”(例如宽度、厚度或半径)的线系列(折线、绘图线)的方法？

这个问题可能是对这个问题的重述: Extruding a graph in three.js .

鉴于我认为没有现成的方法，我很乐意参与创建一个简单函数来回答这个问题的努力。

但是指向现有可行方法的响应会很酷...

正如 WestLangley 所建议的，一种可能的解决方案包括像素宽度恒定的多段线 - Three.js Canvas 渲染器目前可用。

此处显示了两个渲染器的比较:

Canvas and WebGL Lines Compared via GitHub Pages

Canvas and WebGL Lines Compared via jsFiddle

一个可以指定线宽并且在两个渲染器上都出现类似结果的解决方案会非常酷。

但是，还有其他的 3D 线条思考方式，其中线条具有实际的物理构造。他们转换阴影，他们对事件使用react。这些也需要研究。

这里是 GitHub 页面的链接，其中包含两个由多个网格组成的线条演示:

Sphere and Cylinder Polylines

“昂贵的解决方案。每个关节都由一个完整的球体组成。

Cubes Polylines

我的猜测是，将其中任何一个构建为光滑的单个网格对于解决问题来说都是复杂的。因此，与此同时，这里有一个链接，指向宽高的 3D 线的部分可视化:

3D Box Line on jsFiddle

目标是必须“以低水平的复杂性——换句话说——为傻瓜编写代码”。因此，3D 线应该像添加球体或立方体一样简单和熟悉。几何体+ Material =网格>场景。就创建顶点和面而言，几何应该非常经济。

线条应该有宽度和高度。向上始终在 Y 方向。演示显示了这一点。演示没有显示的是 Angular 落被很好地斜接......

最佳答案

我制定了一个可能的解决方案，我相信它可以满足您的大部分要求:

http://codepen.io/garciahurtado/pen/AGEsf?editors=001

这个概念相当简单:在“线框模式”中渲染任意几何体，然后对其应用全屏 GLSL 着色器以增加线框线条的厚度。

该着色器的灵感来自 ThreeJS 发行版中的模糊着色器，它实质上是沿水平和垂直轴多次复制图像。我将该过程自动化，并将副本数设为用户定义的参数，同时确保副本偏移 1 个像素。

我在演示中使用了 3D 立方体网格(使用正射相机)，但将其转换为折线应该很简单。

这个东西真正的核心在于自定义着色器(片段着色器部分):

    uniform sampler2D tDiffuse;
    uniform int edgeWidth;
    uniform int diagOffset;
    uniform float totalWidth;
    uniform float totalHeight;
    const int MAX_LINE_WIDTH = 30; // Needed due to weird limitations in GLSL around for loops
    varying vec2 vUv;

    void main() {
        int offset = int( floor(float(edgeWidth) / float(2) + 0.5) );
        vec4 color = vec4( 0.0, 0.0, 0.0, 0.0);

        // Horizontal copies of the wireframe first
        for (int i = 0; i < MAX_LINE_WIDTH; i++) {
            float uvFactor = (float(1) / totalWidth);
            float newUvX = vUv.x + float(i - offset) * uvFactor;
            float newUvY = vUv.y + (float(i - offset) * float(diagOffset) ) * uvFactor;  // only modifies vUv.y if diagOffset > 0
            color = max(color, texture2D( tDiffuse, vec2( newUvX,  newUvY  ) ));    
            // GLSL does not allow loop comparisons against dynamic variables. Workaround below
            if(i == edgeWidth) break; 
        }

        // Now we create the vertical copies
        for (int i = 0; i < MAX_LINE_WIDTH; i++) {
            float uvFactor = (float(1) / totalHeight);
            float newUvX = vUv.x + (float(i - offset) * float(-diagOffset) ) * uvFactor; // only modifies vUv.x if diagOffset > 0
            float newUvY = vUv.y + float(i - offset) * uvFactor;
            color = max(color, texture2D( tDiffuse, vec2( newUvX, newUvY ) ));  
            if(i == edgeWidth) break;
        }

        gl_FragColor = color;
    }

优点:

• 不需要超出线顶点的额外几何体
• 线条粗细由用户定义
• 全屏着色器在 GPU 上应该相对温和
• 可以完全在 WebGL Canvas 中实现

缺点:

• 线条粗细在水平和垂直边缘接近像素完美，但在对 Angular 线边缘略微偏离。这是由于所使用的算法造成的，并且是解决方案的局限性。话虽如此，对于低线宽和复杂的几何形状，肉眼几乎察觉不到这一点。
• 线条之间的接头将显示足够大的线条粗细的间隙。您可以玩 Codepen 演示以了解我的意思。我开始通过添加第二个“对 Angular 线 channel ”来实现解决方案，但它有点毛茸茸，我认为这只会是更高线宽(+8 像素)或极端线 Angular 问题。如果您对此解决方案感兴趣，可以查看原始来源以了解我的处理方向。
• 由于它使用全屏过滤器，您只能使用 WebGL 上下文来显示这种厚度的对象。显示各种线宽需要额外的渲染过程。

关于javascript - 如何创建具有宽度和厚度的 Three.js 3D 线系列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20738386/