透明对象隐藏了其他透明对象（alphaTest 不起作用并且 depthWrite = false 会造成一些麻烦）

Question

我目前遇到透明度问题。正如您在图片中看到的，显示了透明对象后面的非透明对象。但是另一个透明物体的backside没有显示，我设置了material.side = THREE.DoubleSide.

是可见的，当我设置material.depthWrite = false时，但随后出现了可见的毛刺，您可以在第二张图片中看到。

我使用 THREE.MeshPhongMaterial 和 Three.js 的最新版本。这是您可以在图片中看到的 material 的值

material.color.setHex(0x9ed7f5);
material.emissive.setHex(0x062f61);
material.transparent = true;
material.opacity = 0.5;
material.needsUpdate = true;
material.reflectivity = 0.8;
material.envMap = textureCube;
material.side = THREE.DoubleSide;
material.roughness = 0.2;
material.metalness = 1;
depthWrite = true;

depthwrite = false;

这是它的外观，仅当后面的对象不透明时才有效

好像从另一边我能看到后面的透明物体。

为了完成我对这个问题的困惑，我必须 post 另一张图片。在这里您可以从另一侧看到图片 (1)（场景旋转 180°），因为您可以看到这些视图不同，因为背面缺少一个物体（也是透明的），显示在另一个视图中.所有这些对象都具有完全相同的 material!

envMaptextureCube创建如下

textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
var shaderMaterial = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader
    , vertexShader: shader.vertexShader
    , uniforms: shader.uniforms
    , depthWrite: false
    , side: THREE.BackSide
});
var skyBox = new THREE.Mesh(new THREE.BoxGeometry(1500, 1500, 1500), shaderMaterial);
scene.add(skyBox);

Answer 1

创建透明对象时，尝试将 premultipliedAlpha 设置为 true，这样可以解决问题：

var material = new THREE.MeshPhongMaterial( {color: 'color', transparent: true,opacity:0.5,premultipliedAlpha: true} );

Answer 2

我无法从你的照片中完全看出你的问题，但你能告诉我这是否是一回事吗？

转到 threejs.org/docs/#Reference/Materials/MeshStandardMaterial，在实例中将环境设置为白色，在 material 中打开透明并将不透明度设置为大约 0.7。

你能看出前景中环面的透明部分在后面遮挡其他部分的方式吗？这可能需要一段时间，但如果你在旋转时观察它，你应该明白我的意思。

不幸的是，这是一个 WebGL 限制，暂时无法通过 three.js 解决。

Answer 3

在 2019 年，这仍然是该问题的热门搜索结果。我找到了一个适合我的解决方案（不知道为什么，因为根据某些消息来源，这显然是一个奇怪的 WebGL 问题）。

场景设置好所有透明物体后，设置隐藏物体material的透明属性为false。不能说这对每个人都有效，但它对我有用。证明如下：

透明的绿色框出现在透明的白色形状后面。尽管透明属性设置为 false，但甚至可以更改绿色框的不透明度。

透明对象隐藏了其他透明对象（alphaTest 不起作用并且 depthWrite = false 会造成一些麻烦）

Transparent Object hides other transparent Objects (alphaTest don't works and depthWrite = false causes some trouble)

transparency

webgl

three.js