当你在 Three.js/WebGL 中有两个平面并且其中一个或两个都是透明的时，有时后面的平面会被上面的透明平面隐藏。为什么是这样？
Three.js / WebGL - 透明平面隐藏在它们后面的其他平面
IT技术
javascript
three.js
webgl
depth
zbuffer
2021-02-19 09:45:23
6个回答
假设您正在使用一些透明的 *.png 图像。那么这会有所帮助：
new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });
设置depthWrite属性来false解决我的问题。
new THREE.MeshBasicMaterial({
opacity: 0.25,
transparent: true,
side: THREE.DoubleSide,
depthWrite: false
});
尝试添加alphaTest: 0.5到材料中。
这不是错误，它只是 OpenGL（以及 WebGL）的工作方式。透明表面不能很好地与 z 缓冲区配合使用，因此必须手动排序并从后到前渲染。三个 JS 正在尝试为您执行此操作（这就是为什么当您设置 X 值 > 0 时问题消失的原因），但无法像您展示的那样稳健地处理相交几何的情况。
我已经在不同的 SO question 中更深入地解释了这个问题，所以你可能想参考它。
fwiw，如果你有很多平行平面（看不到你的样本，谷歌无法解析你的域），很容易让它们沿着垂直轴排序。对于飞机列表 [ABCD]，抽签顺序将是 [ABCD] 或 [DCBA]，仅此而已！因此，排序不需要对性能造成影响。走的时候把它们整理好。