17

我试图根据粒子与平面的距离来改变粒子的不透明度。

这个问题描述了我的问题，一年前的答案基本上是“你不能”。不透明度显然是材料的参数，而不是元素，因此单个粒子的不透明度是不可能的。

有什么改变吗，有什么办法可以实现吗？如果单个粒子着色是可能的，我想这并非遥不可及。

干杯

4

2 回答 2

32

编辑 - 这个答案显示了如何使用自定义设置每点不透明度ShaderMaterial。有关使用PointsMaterial. _

ParticleSystem已重命名为PointCloud，然后重命名为Points。

是的，您可以创建点云并动态改变每个粒子颜色的 alpha 值。

在three.js 中，您可以通过将点云的材质设置为ShaderMaterial具有等于每个粒子所需的alpha 值的属性来做到这一点。

如果您不熟悉ShaderMaterials顶点着色器和片段着色器，那么这里有一个非常简单的Fiddle，它实现了具有动态 alpha 的点云：http: //jsfiddle.net/8mrH7/266/。

编辑：更新小提琴

三.js r.129

于 2012-09-10T01:03:25.393 回答
0

不知道为什么，但提出的解决方案对我不起作用。我使用了一些棘手的阴影来使点在边缘变得圆形和模糊。所以点的角应该是透明的，但它们看起来是黑色的：http: //jsfiddle.net/5kz64ero/1/

我的片段着色器的相关部分：

// Distance from 0.0 to 0.5 from the center of the point
float d = distance(gl_PointCoord, vec2(0.5, 0.5));

// Applying sigmoid to smoothen the edge
float opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));

gl_FragColor = vec4(opacity * vColor, opacity);

我认为传统上这是通过深度排序（最远的点首先出现）来解决的，并且我发现一些证据表明ParticleSystemin Three 的一些较旧的实现包含sortParticles属性。但它已经不存在了。在我的情况下，排序确实涉及每次相机位置变化时重做。相反，我设置depthWrite: false它似乎解决了这个问题。

结果：http: //jsfiddle.net/5kz64ero/6/

于 2020-06-01T16:49:55.070 回答