THREE.Line与模糊

Question

Line with blur或其他滤镜是否有任何选项？

我使用替换为带有THREE.Plane的行与纹理，但模仿与位置向量一起移动而lookAt并不像vertices[0]一个vertices[1]那样简单。

Answer 1

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

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

Answer 2

你可以像我一样使用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.AdditiveBlending和THREE.DoubleSide，您可以实时更改几何体的顶点并具有透明的淡化效果！在初始化时不要忘记将顶点列表填充到预定义的量，因为在初始化之后您不能再添加它！您也可以与布隆过滤器结合使用。