three.js - Adjusting opacity of individual particles
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
has been renamed to PointCloud
and then to Points
.
Yes, you can create a Point Cloud and vary the alpha value of each particle's color dynamically.
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.
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: https://jsfiddle.net/7htvbwL6/.
EDIT: Updated fiddle
three.js r.143