Three.js 三，模糊线

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

我对带有

3的线使用了替代方法。带有纹理的平面

，但使用位置向量模拟移动，

lookAt

并不像带有

顶点[0]

a

顶点[1]

的动态线那样简单

---

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

---

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

你可以像我一样使用

THREE.Ribbon

。基本上，

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

为每个顶点添加颜色。从白色到黑色，再加上功能区的材质，

THREE.MeshBasicMaterial

具有

THREE.AdditiveBlend

和

THREE.DoubleSide

，您可以实时更改几何体的顶点，并产生透明的淡入效果！不要忘记在初始化时将顶点列表填充到预定义的数量，因为在初始化之后，您将无法再添加任何顶点列表！您也可以与bloom过滤器结合使用。

谢谢您的回答。但我是GLSL的新手，我不知道如何为辉光线重写着色器。您有任何示例（没有webgl属性行；]）？是的，您可以使用后处理，如中所示。还有其他使用模糊过滤器的示例。