three.js所透明贴图问题(three.js transparent maps issue)

2019-06-26 19:06发布

我创建颗粒的负载(80.000是精确的),我设置了一个透明的地图,不过,并非所有的颗粒都是透明的。

我使用的是透明的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

为什么有些粒子有一个黑色的背景是什么?

Answer 1:

搭配黑色边角这些颗粒在他们身后东西之前被渲染。 所以GL不知道还存在一些落后融为一体。 为了使它看起来对你有自己的ž从后到前的坐标来呈现的顺序执行这些颗粒。



Answer 2:

您可以设置alphaTest的材料来代替透明的财产。 例如,

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

three.js所不再排序颗粒; 他们正在渲染它们出现在缓冲区中的顺序。

three.js所r.85



Answer 3:

尝试webgl_particles_billboards.html。 如果我是正确的它,你希望同样的事情。



Answer 4:

禁用depthWrite的材料属性。

// create a new material
material = new THREE.ParticleBasicMaterial({
    color: colors[i],
    size: 20,
    map: map,
    transparent: true,
    depthWrite: false,
});


文章来源: three.js transparent maps issue