透明对象隐藏其他透明对象（alphaTest 不起作用并且 depthWrite = false 会导致一些麻烦）答案

【问题标题】：Transparent Object hides other transparent Objects (alphaTest don't works and depthWrite = false causes some trouble)透明对象隐藏其他透明对象（alphaTest 不起作用并且 depthWrite = false 会导致一些麻烦）
【发布时间】：2020-02-22 20:27:05
【问题描述】：

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

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

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

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;

这里应该是这样的，只有在后面的对象不透明时才有效

似乎从另一边我可以看到背后的透明物体。

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

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);

【问题讨论】：

你有小提琴吗？
否 :/ 但也许我需要开始使用它

标签： three.js webgl transparency

【解决方案1】：

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

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

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

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

【讨论】：

好的，是的，这正是我的问题所在。谢谢你的回答，现在我知道这不是我的编程错误造成的。

【解决方案2】：

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

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

【讨论】：

我刚刚回到的一个老问题，到目前为止无济于事：/
查看将premultipliedAlpha 设置为true 是否有效
不行，刚试过。我刚刚发现从另一边，你可以看到另一个透明物体（见帖子中的新图片）。也许我的 3D-Object 有问题，导致一个对象通过透明对象显示而另一个不显示？
是不是因为你的对象上的envMap？
我不知道，envMap 是一个围绕我的场景创建的立方体，就像我在上面的帖子中编辑的那样。我在所有这些事情上都不是很有经验，我是通过自己和一些书学会的，但这是我的第一个更大的项目。

【解决方案3】：

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

在场景中设置好所有透明对象后，将隐藏对象的材质透明属性设置为 false。不能说这对每个人都有效，但它对我有用。这是证据：

透明的绿色框出现在透明的白色形状后面。即使将透明属性设置为 false，也可以更改绿色框的不透明度。

【讨论】：