24

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

4

7 回答 7

24

假设您正在使用一些透明的 *.png 图像。那么这会有所帮助：

new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });
于 2012-12-06T10:21:16.133 回答
22

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

new THREE.MeshBasicMaterial({ 
    opacity: 0.25, 
    transparent: true, 
    side: THREE.DoubleSide, 
    depthWrite: false
});
于 2016-01-14T09:11:34.580 回答
21

尝试添加alphaTest: 0.5到材料中。

于 2012-06-23T13:24:43.857 回答
14

这不是一个错误，它只是 OpenGL（以及因此，WebGL）的工作方式。透明表面不能很好地与 z 缓冲区配合使用，因此必须手动排序并从后到前渲染。三个 JS 正在尝试为您执行此操作（这就是为什么当您设置 X 值 > 0 时问题消失的原因）但无法像您展示的那样可靠地处理相交几何体的情况。

我已经在另一个 SO question中更深入地解释了这个问题，所以你可能想参考一下。

于 2012-06-22T23:27:32.670 回答
6

fwiw，如果你有很多平行平面（看不到你的样本，谷歌无法解析你的域），很容易让它们沿着垂直轴排序。对于飞机列表 [ABCD]，抽签顺序将是 [ABCD] 或 [DCBA]，仅此而已！因此，排序不需要对性能造成影响。只要在你去的时候保持它们的顺序。

于 2012-10-25T15:01:33.287 回答
1

设置MeshrenderOrder来解决我的问题，下面是我的代码，你可以修改 node.renderOrder值：

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
                }
            })
})
于 2019-08-09T07:18:03.463 回答
1

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

object3d.material.transparent = 1;
于 2021-05-17T06:00:13.497 回答