Three.js/WebGLに2つの平面があり、それらの一方または両方が透明である場合、背後の平面が上の透明な平面によって隠されることがあります。どうしてこれなの?
これはバグではなく、OpenGL(したがってWebGL)の動作方法です。透明なサーフェスはZバッファではうまく機能しないため、手動で並べ替えて、後ろから前にレンダリングする必要があります。 3つのJSがこれを実行しようとしていますが(X値> 0に設定すると問題が解決する理由です)、表示されているようにジオメトリが交差する場合を確実に処理できません。
この問題については 異なるSO質問 )で詳しく説明したので、参照することをお勧めします。
透明な* .png画像を使用しているとしましょう。次に、これは役立ちます:
new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });
マテリアルにalphaTest: 0.5
を追加してみてください。
depthWrite
プロパティをfalse
に設定すると、問題が解決しました。
new THREE.MeshBasicMaterial({
opacity: 0.25,
transparent: true,
side: THREE.DoubleSide,
depthWrite: false
});
fwiw、平行平面がたくさんある場合(サンプルが表示されない、Googleがドメインを解決できない)、垂直軸に沿って並べ替えておくのは簡単です。飛行機のリスト[AB C D]の場合、描画順序は[A B CD]または[DC B A]のいずれかであり、他には何もありません。したがって、並べ替えによってパフォーマンスが低下する必要はありません。あなたが行くようにちょうどそれらを整理してください。
問題を解決するためにメッシュrenderOrder
を設定する