javascript Three.js / WebGL - 透明平面隐藏在它们后面的其他平面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11165345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js / WebGL - transparent planes hiding other planes behind them
提问by MaiaVictor
When you have two planes in Three.js / WebGL and one or both of them are transparent, sometimes the plane behind will be hidden by the transparent plane above. Why is this?
当你在 Three.js/WebGL 中有两个平面并且其中一个或两个都是透明的时，有时后面的平面会被上面的透明平面隐藏。为什么是这样？
采纳答案by Toji
This is not a bug, it's just how OpenGL (and, hence, WebGL) works. Transparent surfaces don't play well with the z-buffer, and as such must be manually sorted and rendered back-to-front. Three JS is attempting to do this for you (which is why the problem goes away when you set the X value > 0) but cannot robustly handle the case of intersecting geometry like you're showing.
这不是错误，它只是 OpenGL（以及 WebGL）的工作方式。透明表面不能很好地与 z 缓冲区配合使用，因此必须手动排序并从后到前渲染。三个 JS 正在尝试为您执行此操作（这就是为什么当您设置 X 值 > 0 时问题消失的原因），但无法像您展示的那样稳健地处理相交几何的情况。
I've explained the issue more in-depth in a different SO question, so you may want to reference that.
我已经在不同的 SO question 中更深入地解释了这个问题，所以你可能想参考它。
回答by Alex Under
Let's say that you are using some transparent *.png image. Then this would help:
假设您正在使用一些透明的 *.png 图像。那么这会有所帮助：
new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });
回答by mrdoob
Try adding alphaTest: 0.5to the material.
尝试添加alphaTest: 0.5到材料中。
回答by Wilt
Setting the depthWriteproperty to falsesolved my issue.
设置depthWrite属性来false解决我的问题。
new THREE.MeshBasicMaterial({
opacity: 0.25,
transparent: true,
side: THREE.DoubleSide,
depthWrite: false
});
回答by bjorke
fwiw, if you have lots of parallel planes (can't see your sample, google can't resolve your domain), it's easy to keep them sorted along the perpendicular axis. For a list of planes [A B C D] the order-to-draw will be either [A B C D] or [D C B A] and nothing else! So there need not be a performance hit from sorting. Just keep them in order as you go.
fwiw，如果你有很多平行平面（看不到你的样本，谷歌无法解析你的域），很容易让它们沿着垂直轴排序。对于飞机列表 [ABCD]，抽签顺序将是 [ABCD] 或 [DCBA]，仅此而已！因此，排序不需要对性能造成影响。走的时候把它们整理好。
回答by Nokey
Setting Mesh renderOrderto solve my problem
设置MeshrenderOrder来解决我的问题
