CODEWITHSUNDEEP
javascriptthree.jswebglshader
williamsi
williamsi

Reputation: 1606

How do I change particle colors in GPUParticleSystem Three.js?

I can change the spawn option color, but there's still white particles (like a base particle spawn color?). I'm trying to add black particles in a white THREE.scene, the problem is when I use a white scene background, the particleSystem's spawn option color disappears/turns white.

i.e.

  // options passed during animate() | particleSystem.spawnParticle(options)
  // particle color is now 0x3174a5 with the "white base color"

  options = {
    position: new THREE.Vector3(),
    positionRandomness: .3,
    velocity: new THREE.Vector3(),
    velocityRandomness: .5,
    color: 0x3174a5,
    ...
  };

Now if I change the options' 'color' property to 0x000000, only the "white base color" is left.

When I change the scene background to white, the particles can't be seen.

scene.background = new THREE.Color( 0xcccccc ); // grey background

When the scene color is grey (something like 0xcccccc), it looks like the scene color is an overlay on top of the Particle System.

Any help is appreciated!

Upvotes: 0

Views: 464

Answers (1)

Mugen87
Mugen87

Reputation: 31026

The mentioned white color is the result of additive blending. The following code should produce your desired visual output:

particleSystem.particleShaderMat.blending = THREE.SubtractiveBlending;

Upvotes: 2

Related Questions