three.js：由部分透明的网格投射的阴影

Question

我有一个带有纹理的模型，并且该纹理在某些区域是透明的（alpha为零）。

但是，当模型投射阴影时，阴影看起来就像模型是实体一样。

我怎样才能解决这个问题？

Answer 1

在three.js中投射阴影时，从光的角度看，网格被视为实体。

但是，如果网格物体具有透明纹理或Alpha贴图，则可以通过CustomDepthMaterial为网格物体指定a来获得适当的阴影。

有几种方法可以做到这一点。一种方法是通过自定义ShaderMaterial。在three.js示例中有一个方法示例。

对于简单的场景，使用以下模式就足够了：

var customDepthMaterial = new THREE.MeshDepthMaterial( {

    depthPacking: THREE.RGBADepthPacking,

    map: myTexture, // or, alphaMap: myAlphaMap

    alphaTest: 0.5

} );

mesh.customDepthMaterial = customDepthMaterial;

three.js r.85