Three.js / WebGL - 隐藏其他平面的透明平面

Question

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

Answer 1

假设您使用的是透明* .png图片。那么这会有所帮助：

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

Answer 2

尝试将alphaTest: 0.5添加到素材中。

Answer 3

将depthWrite属性设置为false解决了我的问题。

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

Answer 4

这不是一个错误，它只是OpenGL（以及WebGL）的工作原理。透明曲面与z缓冲区不兼容，因此必须手动排序并从前到后渲染。三个JS正试图为你做这个（这就是为什么当你设置X值＆gt; 0时问题就消失了）但是不能像你正在展示的那样强有力地处理交叉几何的情况。

我已在different SO question中更深入地解释了这个问题，因此您可能需要参考该问题。

Answer 5

fwiw，如果你有很多平行的平面（无法看到你的样本，谷歌无法解析你的域），很容易保持它们沿垂直轴排序。对于平面列表[A B C D]，绘制顺序将是[A B C D]或[D C B A]，而不是别的！因此，排序不会对性能造成影响。你可以随时保持秩序。

Answer 6

这对我有用，不要使用文字布尔值 true 尝试使用 1 代替。

object3d.material.transparent = 1; 

Answer 7

设置网格renderOrder来解决我的问题