three.js透明材质:对象并不总是透明的

时间:2012-06-28 15:12:34

标签: transparent three.js tracing material

我使用Three.js来对象查看和挑选,我有一个可见性问题

我在three.js中加载了一个collada对象 我的collada装载机与回购装置略有不同。我添加了

function copyMaterial (_material) {
    var newMaterial = new THREE.MeshLambertMaterial();
    for (var p in _material) {
        if (_material.hasOwnProperty(p) && p !== "id") {
            var obj = _material[p];
            newMaterial[p] = obj;
        }
    }
    return newMaterial;
}

并且在加载材料时我只需在分配之前复制它

这允许我分别更改每个对象的不透明度,即使它们使用相同的collada材质。

这很有效。 现在通过这样做我现在看到一些奇怪的行为。 根据我的对象的方向,某些部分通过透明度显示或不显示。 屏幕截图将更好地解释,

we dont see the internal parts

we see the internal parts

关于发生了什么以及如何解决它的任何想法?

由于

1 个答案:

答案 0 :(得分:3)

据我所知,这种情况有两次发生:

1)当你在同一个位置设置了多个方面时,一个可见,另一个不可见。因此,在渲染时,它取决于首先渲染的摄像机角度。

2)当您通常尝试设置透明对象的所有部分时,但仍希望能够通过其他部分看到一些面部。同样,这就是渲染器的工作原理。

现在,我发现的唯一解决方案是将FrondSide和BackSide分配给单独的材质,并将它们设置为同一个对象(我想是你对象的一部分):

texture = new THREE.Texture(textureImage);
texture.needsUpdate = true;
material = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true,
    side: THREE.BackSide
 }); 
material2 = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true
});
geometry = new THREE.SphereGeometry(RADIUS, 40, 20);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh = new THREE.Mesh(geometry, material2);
scene.add(mesh);

https://github.com/mrdoob/three.js/issues/2476了解有关该问题的更多信息