24

Three.js / WebGLに2つの平面があり、それらの一方または両方が透明である場合、背後の平面が上の透明な平面によって隠されることがあります。どうしてこれなの？

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バッファではうまく機能しないため、手動で並べ替えて、後ろから前にレンダリングする必要があります。3つのJSがこれを実行しようとしていますが（X値を0に設定すると問題が解決するため）、表示されているようにジオメトリが交差する場合を確実に処理できません。

別のSOの質問でこの問題をより詳細に説明したので、それを参照することをお勧めします。

于 2012-06-22T23:27:32.670 に答える
6

fwiw、平行平面がたくさんある場合（サンプルが表示されない、Googleがドメインを解決できない）、垂直軸に沿って並べ替えておくのは簡単です。飛行機のリスト[ABCD]の場合、描画順序は[ABCD]または[DCBA]のいずれかになり、それ以外は何もありません。したがって、並べ替えによってパフォーマンスが低下する必要はありません。あなたが行くようにちょうどそれらを整理しておいてください。

于 2012-10-25T15:01:33.287 に答える
1

私の問題を解決するためにメッシュを設定renderOrderします。以下は私のコードです。値を変更できます。 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 に答える