Javascript Three.js/WebGL-透明平面将其他平面隐藏在后面

如果在Three.js/WebGL中有两个平面，并且其中一个或两个都是透明的，则后面的平面有时会被上面的透明平面隐藏。这是为什么？

这不是一个bug，这只是OpenGL（以及WebGL）的工作方式。透明曲面不能很好地使用z缓冲区，因此必须手动排序并从前向后渲染。Three JS正试图为您这样做（这就是为什么当您将X值设置为>0时，问题会消失），但无法可靠地处理如您所示的相交几何体的情况

---

我在一篇文章中更深入地解释了这个问题，所以你可能想引用它。

尝试在材料中添加

alphaTest:0.5

。

fwiw，如果你有很多平行平面（看不到你的样本，谷歌无法解析你的域），很容易让它们沿着垂直轴排序。对于平面列表[AB C D]，绘制顺序将是[AB C D]或[DC B a]，而不是其他！因此，排序不必对性能造成影响。只需在运行过程中保持它们的有序。

假设您使用的是一些透明的*.png图像。那么这将有助于：

new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });

---

将

depthrite

属性设置为

false

解决了我的问题

new THREE.MeshBasicMaterial({ 
    opacity: 0.25, 
    transparent: true, 
    side: THREE.DoubleSide, 
    depthWrite: false
});

---

设置网格

renderder

以解决我的问题，下面是我的代码，您可以修改

节点。renderder

值：

loader.load(model_url, (gltf)=>{
            let scene = gltf.scene

            scene.traverse((node)=>{

                if(node.isMesh){
                    node.material.transparent = true

                    if(node.name === 'car_windows'){
                        node.material.opacity = 0.4
                        node.material.side = 0
                        node.renderOrder = 110
                    }

                    if(node.name === 'car_body'){
                        node.material.opacity = 0.4
                        node.renderOrder = 100
                    }

                    if(node.name === 'car_seats'){
                        node.material.opacity = .5
                        node.renderOrder = 90
                    }

                    mesh_arr.push(node)
                    mesh_objs[node.name] = node
                }
            })
})

---

这对我很有用，不要使用字面布尔值true，而是尝试使用1

object3d.material.transparent = 1; 

---

谢谢你的回答，但是你告诉我最好重新设计我的游戏，或者是一个解决方案——黑客攻击Three.JS？@Toji——你提到的问题并不是针对同一个问题。在另一个问题中，只有对象/纹理的一部分是透明的，在这个问题中，整个平面是透明的，只需完全禁用透明平面的

depthWrite

即可轻松解决。您已经尝试过了，不起作用：/I我想这是一个webgl问题，所以我必须重新设计我的游戏如何显示平面。它看起来有点像黑客。我有一个平面，上面有一个基于画布的纹理映射到它，显示文本。在某些角度/位置，我遇到了纹理材质透明度的问题，这解决了它，所以谢谢！注意：

alphaTest

是一种树状结构，它可以使纹理中的半透明区域完全不透明（当像素不透明度>树状结构时）或完全透明（当像素不透明度<树状结构时）。这可能会导致丑陋的边缘。问题是，我有一些平面应该渲染为与其他平面交叉。就像是3d平面剑一样。我想问一下，你是如何在被问了这么长时间后发现这个问题的？4个投票人是如何来到这里的？你的问题与人们的行为有关，我无法回答：）然而，如果你有相互交叉的多边形，除了K-Buffers或原始A-Buffer算法等逐片段解决方案外，没有简单正确的解决方案，除非你特别注意三角形交叉点，并在运行中对它们进行细分。出于某种原因，

侧：三。后侧

部分阻止了我的图像一起渲染。但除此之外，其余的都很有效！您可能想使用THREE.DoubleSide，这样它从两侧都可见。在我的情况下，它是有效的，但是它的含义是什么？哪些案例现在开始不起作用？谢谢。不再有“透明黑盒问题”！虽然，答案没有包括任何例子，也没有真正的描述性，但这是我唯一的选择，谢谢@Footniko很抱歉没有示例代码，我已经添加了它，希望对您有所帮助。：）