three.js – Adjusting opacity of individual particles

by

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

More Related Contents:

  1. How to change the zOrder of object with Threejs?
  2. Transparent objects in Threejs
  3. Mouse / Canvas X, Y to Three.js World X, Y, Z
  4. How does the calculation of the light model work in a shader program?
  5. Transparent objects in Three.js
  6. Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?
  7. Display wireframe and solid color
  8. artifacts when rendering both sides of a transparent object with three.js
  9. THREE.JS: Get object size with respect to camera and object position on screen
  10. three.js – how do I rotate a cylinder around a specific point?
  11. Three.js – Can I ‘apply’ position, rotation, and scale to the geometry?
  12. Outline object (normal scale + stencil mask) three.js
  13. How to use multiple materials in a Three.js cube?
  14. Three.js Rotate Texture
  15. How to implement a ShaderToy shader in three.js?
  16. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  17. Three.js – Width of view
  18. THREE.js : 2xMeshes using same vector as position
  19. Converting 3D position to 2d screen position [r69!]
  20. How to find the unicode of the subscript alphabet?
  21. Multiple transparent textures on the same mesh face in Three.js
  22. How to get the absolute position of a vertex in three.js?
  23. How to change face color in Three.js
  24. three.js set and read camera look vector
  25. Three.js: Adding and Removing Children of Rotated Objects
  26. Orthographic camera and selecting objects with raycast
  27. Unity 5.5 obsolete particle system code
  28. catch the click event on a specific mesh in the renderer
  29. Three.JS wireframe material – all polygons vs. just edges
  30. How to flip a Three.js texture horizontally

Leave a Comment