10

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

我正在使用透明的 PNG 图像：（粒子.png它几乎不可见，但还好）作为材质贴图，尽管它显示黑色背景，如下所示：

粒子

如果你仔细观察，一些粒子很好地融合在一起（没有重叠的黑边），虽然有些粒子没有。可能是因为有太多重叠的透明对象，或者这不应该是一个问题吗？

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

// 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

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

4

4 回答 4

20

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

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

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

三.js r.85

于 2012-08-06T12:35:30.087 回答
12

那些带有黑角的粒子在它们后面的任何东西之前渲染。所以 GL 还不知道有什么东西可以混合。为了使它看起来正确，您必须按照它们的 z 坐标顺序从后到前渲染这些粒子。

于 2012-08-06T12:18:50.113 回答
1

禁用depthWrite材质上的属性。

// create a new material
material = new THREE.ParticleBasicMaterial({
    color: colors[i],
    size: 20,
    map: map,
    transparent: true,
    depthWrite: false,
});
于 2019-02-28T07:13:00.057 回答
0

试试 webgl_particles_billboards.html。如果我是对的，它会做你期望的同样的事情。

于 2012-08-06T17:17:46.540 回答