Three.js 并非所有粒子都是透明的（单个材质）

我的粒子并非全部渲染为透明。在下图中，您可以看到一些图像被背景色框包围（在它们后面剪辑图像），而其他图像则不是（不要在它们后面剪辑图像）

这是我正在使用的PNG文件：

我加载图像并创建如下材质：

    cimage = THREE.ImageUtils.loadTexture( '/models/candy/c1.png' )
    cmat = new THREE.ParticleSystemMaterial
        size: 100
        map: cimage
        transparent: true

为什么粒子不是全部透明的

---

我发现了这一点，但没有一个解决方案是我真正想要的：

• depthWrite/depthTest=false：我希望粒子影响深度，它们应该正确重叠
• sortParticles=true：仅当存在一个粒子系统时有效，其他粒子系统的方块仍然显示
• alphaTest=0.5：这是最接近的，但图像的边框不是不干净，就是仍然有背景色

---

您需要对particlesystem进行排序，以获得正确的透明级别

particlesystem.sortParticles = true

如果同时查看多个particleSystem，则有3个选项：

• 使用alphaTest属性，因为这样会丢弃定义了alpha小于1的片段
• 您可以将两个粒子系统合并，并为其提供另一个着色器材质。这样就可以将它们再次作为一个整体进行排序
• 最后一个选项是在webglrenderer中编写自己的postplugin。（这很难）

---

我刚刚更新了我的问题，指出如果涉及多个ParticleSystem，这种方法不起作用。Three.js还没有提供这种功能。我能建议的最好的方法是使用alphaTest属性，因为它会丢弃定义了alpha值小于1的片段。您可以做的另一件事是组合两个粒子系统并为其提供另一个着色器材质。这样就可以将它们再次作为一个整体进行排序。最后一个选项是在webglrenderer中编写自己的postplugin。对于前两个，只要有游乐场可以玩，我就可以帮忙。最后一个对于返回来说确实有点太复杂了。我现在正在使用alphaTest，对于演示来说已经足够好了。不过，我最终不得不编写自己的着色器，因为我还需要旋转粒子。