Three.js - 透明なプレーンがスプライトを隠している

Question

シーンにテキストスパイを追加すると、透明なプレーンがスプライトを隠すことがわかりましたが、3Dオブジェクトを隠すことはありませんでした。 これはなぜ、どのようにスプライトを透明な平面の下に見えるようにするのですか？

// transparent plane 
geometry = new THREE.PlaneGeometry(200, 200, 200); 
material = new THREE.MeshBasicMaterial({ 
      color: 0xa6cfe2, 
      side: THREE.DoubleSide, 
      transparent: true, 
      opacity: 0.5, 
      depthFunc: THREE.LessDepth, 
     }); 

しかし、それは何の仕事が良いようだ：PNG example click here

私の飛行機を見に

です。 だから、そのexamleのために、私は問題を把握するために、フィドルにいくつかのコードを書いた： look fidddle example

Answer 1

three.js、まず透明なオブジェクト、そして最後にスプライトを不透明なオブジェクトをレンダリングします。あなたのスプライトは他のオブジェクトと同様に深度バッファの影響を受けます。

あなたはデプスバッファへの書き込みから、あなたの透明なオブジェクトを防ぐために、このパターンを使用することができます。

// transparent plane 
geometry = new THREE.PlaneGeometry(200, 200, 1, 1); 

material = new THREE.MeshBasicMaterial({ 
    color: 0xa6cfe2, 
    side: THREE.DoubleSide, 
    transparent: true, 
    opacity: 0.5, 
    depthWrite: false 
}); 

更新フィドル：https://jsfiddle.net/vyLc6roq/2/

r.84