Three.js - 调整单个粒子的不透明度

Question

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

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

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

干杯

Answer 1

编辑 - 此答案展示了如何使用自定义 ShaderMaterial 设置每点不透明度。请参阅https://stackoverflow.com/a/67892506/1461008使用 PointsMaterial 的方法。

<小时/>

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

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

在 Three.js 中，您可以通过将点云的 Material 设置为 ShaderMaterial 来实现此目的，该 Material 的属性等于每个粒子所需的 alpha 值。

如果ShaderMaterials、顶点着色器和片段着色器对您来说是新的，这里有一个非常简单的 fiddle ，它实现了具有动态alpha的点云:https://jsfiddle.net/9Lvrnpwc/ .

编辑:更新了 fiddle

三.js r.148