three.js - 三、线条模糊

Question

带有模糊或其他过滤器的线条是否有任何选项？

我使用THREE.Plane带有纹理的 Line 的替代方法，但模仿带有位置矢量的移动，并且lookAt不像vertices[0]带有vertices[1].

Answer 1

使用 WebGLRenderer 的 Line 对象没有很多选项。使用 CanvasRenderer 或 SVG 渲染器我相信你可以用它做更多的事情。例如，大多数 WebGL 实现（Windows 中的 Chrome）仅支持最大线宽 1，因此您甚至无法更改宽度。如果您切换到 CanavsRenderer，您可以使用“lineWidth”选项进行设置。但是，我不知道是否可以使用这样的简单选项来模糊这条线。

如果您想使用 WebGLRenderer，最好的办法是查找有关 GLSL 的信息并编写自定义着色器。然后查看此示例，了解如何为 Line 对象编写自定义着色器。这个例子似乎做得很好。我相信它可以适应你的目标。

Answer 2

你可以THREE.Ribbon像我一样使用 a 。基本上，其中的点Ribbon.geometry被渲染为四边形，就像丝带一样。例如，拥有积分

Ribbon.geometry=[
new THREE.Vertex3(1,0,0),
new THREE.Vertex3(-1,0,0),
new THREE.Vertex3(1,0,10),
new THREE.Vertex3(-1,0,10)
]

将在 z 轴上从原点向外渲染一条细条。您可以使用Ribbon.geometry.colors为每个顶点添加颜色。从白色到黑色，结合Ribbon的材质，THREE.MeshBasicMaterial有THREE.AdditiveBlending和THREE.DoubleSide，可以实时改变几何体的顶点，有透明的渐变效果！初始化时不要忘记将顶点列表填充到预定义的数量，因为初始化后无法再添加！您也可以与布隆过滤器结合使用。