三.js - 调整单个粒子的不透明度 [英] three.js - Adjusting opacity of individual particles

问题描述

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

I am trying to vary the opacity of particles as a function of their distance from a plane.

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

This issue describes my problem, and the answer a year ago was essentially "you can't". Opacity is apparently a parameter of a material, not an element, and hence individual particle opacity is not possible.

有什么改变吗，我有什么办法可以做到这一点吗?如果单个粒子着色是可能的，我想这并非遥不可及.

Has anything changed, is there any way I could achieve this? If individual particle colouring is possible, I imagine this isn't out of reach.

干杯

推荐答案

EDIT - 此答案显示了如何使用自定义 ShaderMaterial 设置每个点的不透明度.有关使用 PointsMaterial 的方法，请参阅 https://stackoverflow.com/a/67892506/1461008.

EDIT - This answer shows how to set per-point opacity using a custom ShaderMaterial. See https://stackoverflow.com/a/67892506/1461008 for an approach using PointsMaterial.

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

ParticleSystem has been renamed to PointCloud and then to Points.

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

Yes, you can create a Point Cloud and vary the alpha value of each particle's color dynamically.

在three.js中，您可以通过将点云的材质设置为ShaderMaterial，其属性等于每个粒子所需的alpha值.

In three.js, you can do this by setting the Point Cloud's material to be a ShaderMaterial having an attribute equal to the desired alpha value for each particle.

如果ShaderMaterials、顶点着色器和片段着色器对你来说是新的，这里有一个非常简单的 Fiddle，它实现了一个带有动态 alpha 的点云:http://jsfiddle.net/8mrH7/266/.

If ShaderMaterials, vertex shaders and fragment shaders are new to you, here is a really simple Fiddle that implements a Point Cloud with dynamic alphas: http://jsfiddle.net/8mrH7/266/.

更新小提琴

three.js r.129

three.js r.129

这篇关于三.js - 调整单个粒子的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！