three.js所/ WebGL的 - 透明面躲在他们身后的其他飞机three.js所/ WebGL

当你在three.js所/ WebGL和一个或者两个的两个面是透明的，有时平面之后将由透明平面上方隐藏。 为什么是这样？

Answer 1:

这是不是一个错误，这是多么的OpenGL（和，因此，WebGL的）的作品。 透明的表面不与z缓冲发挥出色，因此必须手动排序并呈现后端到前端。 三JS试图为你做这个（这就是为什么这个问题会消失，当你设置的X值> 0），但不能可靠地处理相交的几何形状像你显示的情况。

我已经解释这个问题更深入的在不同的SO问题 ，所以你可能要引用。

Answer 2:

比方说，您使用的是一些透明* PNG图片。 那么这将有所帮助：

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

Answer 3:

尝试添加alphaTest: 0.5至所述材料。

Answer 4:

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

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

Answer 5:

FWIW，如果你有很多平行的平面（看不到你的样品，谷歌无法解析您的域名），很容易让他们沿着垂直轴来分类。 对于飞机[ABCD]列表的顺序对平局将是要么[ABCD]或[DCBA]，没有别的！ 所以不需要有从分拣打了一个表现。 只要保持他们为了你去。

文章来源: Three.js / WebGL - transparent planes hiding other planes behind them