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

编辑-此答案显示如何使用自定义设置每点不透明度 ShaderMaterial 看见 https://stackoverflow.com/a/67892506/1461008 对于使用 PointsMaterial 。

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

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

在three.js中,可以通过将点云的材质设置为 遮光板材料 具有等于每个粒子的期望阿尔法值的属性。

如果 ShaderMaterials ,顶点着色器和片段着色器对您来说是新的,以下是 真的很简单 使用动态字母实现点云的Fiddle: https://jsfiddle.net/9Lvrnpwc/ 。

编辑:更新的小提琴

三个.js r.148

不知道为什么,但提出的解决方案对我不起作用。我使用了一些棘手的阴影来使点变得圆而模糊。因此,点的角本应是透明的,但它们看起来是黑色的: 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);

我认为传统上这是通过深度排序来解决的(最远点优先),并且我发现一些证据表明 ParticleSystem 包含三个 sortParticles 属性但它已经不在了。在我的情况下,每次相机位置改变时,排序都会重新进行。相反,我设置 depthWrite: false 它似乎解决了这个问题。

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