Three.js 使用WebGL&；绘制圆形粗线；3.js

我刚开始摆弄WebGL和three.js。 我真的想创建一条粗线，它有圆角和端点。（见示例图片）

不幸的是，我首先看到LineBasicMaterial的linecap属性实际上不起作用。

我开始考虑使用管子，但我想我还是不会得到一个圆帽

有人知道我如何在上图中画一条线吗？它不一定必须使用three.js制作，但WebGL将是一项要求。（我还想进一步制作这一行的动画…）

谢谢你的提示

---

干杯

有几种方法可以绘制三维体积线。第一个是在着色器中进行顶点扩展。这就是评论中的链接所做的。如果您需要更多材料，这里还有一个：

不幸的是，当直线段直接向前看时，它会产生视觉伪影。请在此处查看演示：。旋转场景，您会注意到一些直接面向摄影机的线段将快速旋转。它看起来更糟糕，与一个低噪音的纹理顺便说一句。如果这对你来说是好的，这可能是首选的选择

第二个选项是为每个线段动态生成胶囊网格。除此之外，这是一个简单的、有点低效的教唆方法

---

第三个选项是在着色器中执行有限类型的光线跟踪。计算线段和被着色片段之间的距离，我们可以使用该距离来确定适当的颜色。这里有一个例子。webgl当前不支持几何体着色器，但没有任何东西可以阻止您通过javascript生成边界线长方体。哦，如果你需要软线，你可能需要

blend\u minmax

扩展。可能是最难设置的方法，但与其他两种方法相比，可以从任何角度查看，并且非常具有自定义功能。

2d或3d？如果是2d，我会选择最简单的方法：将每条线画成一个矩形+2个半圆。否则会有这样的东西不幸的是我需要它是3d的。可以想象图像的坐标是（0，0，0），（1，0，0），（1，0，1.2），（1，0.25，1.2），（1，0.25，0.3），从左侧顶点开始。谢谢你的链接。我会检查它们。还有一个专门为Three.js命名的lib。我仍在努力解决这个问题。谢谢你的提示！我们尝试了不同的方法（例如，三个示例中带有BufferSubsectionModifier的tubeGeometry），但它仍然不能真正产生我们想要的效果，而且速度很慢。检查了THREE.MeshLine，但我真的不知道如何产生像我图像中那样的结果…@KirillDmitrenko我无法在forge viewer中实现这一点你有任何示例吗？