How can i add opacity animation


I want to make stars. But I could not add opacity animation to particles. I couldn’t find it in the star example made with three js, when I tried to do it myself, there was no smooth opacity animation. It was not random.

Can you please help? How can I add opacity animation to these particles?

It depends how you would like to animate the opacity property of a material, in an animation loop, it can be as simple as a Math.sin function to fluctuate up and down, or you could create complex gsap animations. What result are you after?

I wanna do create random stars and random fade in/out animation.

If you wanted to have stars dotted randomly with an opacity animation, you could use a ShaderMaterial. I don’t know how that would look, because that would be up to you, but if you wanted to have stars speckled across the background, you could have the ShaderMaterial take a vec2 for the position between -1 and 1 on both x and y, in the shader, set the z value to 1.0 to make sure it is in the background. That could look something like this (at least the shader)

void main(void){
  //just get xy from the position, because it is a vec3, unless when you
  //make the geometry, you bake in the 1.0 for the z value. How you do
  //this is mostly up to you.
  gl_Position = vec4(position.xy, 1.0, 1.0);

and then do something else for the alpha. How you do that would be up to you.

Another solution would be to use spheres, and dot those around the background, make them transparent, and then mess with the opacity value in the animation loop.