three.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.

欢呼

推荐答案

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，顶点着色器和片段着色器不是您的新手，这是一个非常简单的小提琴，该小提琴实现了具有动态alpha的点云:

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.84

three.js r.84

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