three.js：部分的に透明なメッシュでキャストされたシャドウ

Question

私はテクスチャを持つモデルを持っており、テクスチャは一部の領域で透明です（アルファはゼロです）。

ただし、モデルが影を投じると、影がモデルのように見えます。

どうすればこの問題を解決できますか？

Answer 1

シャドウをthree.jsにキャストすると、メッシュはライトの視点からソリッドとして扱われます。

ただし、メッシュに透明テクスチャまたはアルファマップがある場合は、メッシュにCustomDepthMaterialを指定して適切なシャドウを設定できます。

これを行うにはいくつかの方法があります。 1つの方法は、カスタムShaderMaterialです。 this three.js exampleにそのアプローチの例があります。

var customDepthMaterial = new THREE.MeshDepthMaterial({ 

    depthPacking: THREE.RGBADepthPacking, 

    map: myTexture, // or, alphaMap: myAlphaMap 

    alphaTest: 0.5 

}); 

mesh.customDepthMaterial = customDepthMaterial; 

three.js r.85