三.js透明材质：对象并不总是透明的答案

【问题标题】：three.js transparent material: object not always transparent三.js透明材质：对象并不总是透明的
【发布时间】：2023-03-27 19:15:01
【问题描述】：

我使用 Three.js 来查看和挑选对象，但我遇到了可见性问题

我在 three.js 中加载了一个 collada 对象我的 collada 加载器与 repo 的加载器略有不同。我加了

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

知道发生了什么以及如何解决它吗？

谢谢

【问题讨论】：

标签： three.js trace transparent

【解决方案1】：

据我所知，这种情况发生在 2 次：

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 了解有关此问题的更多信息

【讨论】：

非常感谢 Alex 的回答。解决方案似乎很重，但至少有一个！