javascript - three.js 透明 map 问题

Question

我正在创建大量粒子(准确地说是 80.000 个)并且我设置了一个透明贴图，但并非所有粒子都是透明的。

我正在使用透明的 PNG 图像: (它几乎看不见，但还好)作为 Material 贴图，尽管它显示黑色背景，如下所示:

如果您仔细观察，有些粒子会很好地混合在一起(没有重叠的黑色边缘)，但有些则不会。可能是因为有太多重叠的透明对象，或者这不应该成为问题吗？

这是负责生成我的粒子的片段:

// load the texture
var map = THREE.ImageUtils.loadTexture('img/particle.png');

// create temp variables
var geometry, material;

// create an array with ParticleSystems (I need multiple systems because I have different colours, thus different materials)
var systems = [];

// Loop through every colour
for(var i = 0; i < colors.length; i++) {
    // Create a new geometry
    geometry = new THREE.Geometry();

    // create a new material
    material = new THREE.ParticleBasicMaterial({
        color: colors[i],
        size: 20,
        map: map, // set the map here
        transparent: true // transparency is enabled!!!
    });

    // create a new particle system
    systems[i] = new THREE.ParticleSystem(geometry, material);

    // add the system to the scene
    scene.add(systems[i]);
}

// vertices are added to the ParticleSystems' geometry here

为什么有些粒子背景是黑色的？

Answer 1

您可以设置 Material 的 alphaTest 属性而不是透明度。例如，

material.alphaTest = 0.5;
material.transparent = false;

three.js 不再对粒子进行排序；它们按照它们在缓冲区中出现的顺序呈现。

three.js r.85