THREE.js - 创建粒子系统的发光球

所以我有一个简单的粒子系统使用THREE.Points和THREE.ParticleBasicMaterial作为材料。THREE.js - 创建粒子系统的发光球

所有点都使用此.png图像呈现为广告牌。

渲染时我希望每个粒子都是一个发光的球体（不完全发光，但由于径向渐变渐变为透明效果，肯定会产生这种效果）。如何获得透明度的工作？结果是这样的：

我的材料看起来像这样（请注意，我尝试过使用不同类型的混合模式，但它们只是让事情变得更糟）。

 this.material = new THREE.ParticleBasicMaterial({ 
      color: 'transparent', 
      size: 0.8, 
      map: this.spriteImage, 
      transparent: true, 
      sizeAttenuation: true 
     });

来源

2016-07-22 AlvinfromDiaspar

添加 “depthWrite：假” 你的材料，如：

this.material = new THREE.ParticleBasicMaterial({ 
    color: 'transparent', 
    size: 0.8, 
    map: this.spriteImage, 
    transparent: true, 
    opacity: 0.5,  // should be less than 1.0 
    sizeAttenuation: true, 
    depthWrite: false 
});

来源

2016-07-23 22:32:01 TheWebDesignerPro

感谢。这是做什么的？ – AlvinfromDiaspar

如果透明物体的透明度超过另一个物体的透明度，则会导致附加图像中显示的毛刺。 depthWrite：false解决了这个问题。顺便说一下，您还必须设置材质的不透明度，任何小于1.0的值。我已经更新了我的答案。 – TheWebDesignerPro

谢谢。我尚未验证这是否有效。将其标记为答案，如果它的作品。 – AlvinfromDiaspar

THREE.js - 创建粒子系统的发光球

回答

相关问题