three.js: shadows cast by partially transparent mesh

Question

I have a model with a texture, and the texture is transparent in some areas (alpha is zero).

However, when the model casts a shadow, the shadow appears as if the model is solid.

How can I fix this?

Answer 1

When casting shadows in three.js, meshes are treated as solid from the point of view of the light.

However, if your mesh has a transparent texture, or an alpha map, you can achieve proper shadows by specifying a CustomDepthMaterial for the mesh.

There are several ways to do that. One way is via a custom ShaderMaterial. There is an example of that approach in this three.js example.

For simpler scenes, it is sufficient to use this pattern:

var customDepthMaterial = new THREE.MeshDepthMaterial( {

    depthPacking: THREE.RGBADepthPacking,

    map: myTexture, // or, alphaMap: myAlphaMap

    alphaTest: 0.5

} );

mesh.customDepthMaterial = customDepthMaterial;

three.js r.85