如何在 GPUParticleSystem Three.js 中更改粒子颜色？答案

【问题标题】：How do I change particle colors in GPUParticleSystem Three.js?如何在 GPUParticleSystem Three.js 中更改粒子颜色？
【发布时间】：2018-03-29 23:26:35
【问题描述】：

我可以更改生成选项颜色，但仍然有白色粒子（比如基础粒子生成颜色？）。我正在尝试在白色 THREE.scene 中添加黑色粒子，问题是当我使用白色场景背景时，particleSystem 的 spawn 选项颜色消失/变成白色。

即

  // 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,
    ...
  };

现在，如果我将选项的“颜色”属性更改为 0x000000，则只剩下“白色基色”。

当我将场景背景更改为白色时，看不到粒子。

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

当场景颜色为灰色时（类似于 0xcccccc），看起来场景颜色是粒子系统顶部的叠加层。

感谢任何帮助！

【问题讨论】：

标签： javascript three.js webgl shader

【解决方案1】：

上面提到的白色是添加剂混合的结果。以下代码应该会产生您想要的视觉输出：

particleSystem.particleShaderMat.blending = THREE.SubtractiveBlending;

【讨论】：