Search code examples
three.jsshadow

threejs mesh with alpha mask, cast shadow

A single plane with an alpha mask must cast shadows. It does but for the whole plane- not applying the alpha mask-.

Searching around I've found that adding a customDeptMaterial to the mesh should do it:

var customDepthMaterial = new THREE.MeshDepthMaterial( {
            depthPacking: THREE.RGBADepthPacking,
            alphaMap: alphaTex,  
            alphaTest: 0.5
        } );
figures.customDepthMaterial = customDepthMaterial;

Not that I am very sure of what's going on exactly but I must be missing something because it keeps casting the whole plane

Please see the complete fiddle: https://jsfiddle.net/truji7/gj7az9eo/34/

How can I cast the "alpha filtered" shadow?

Solution

  • PointLights are the only type of light that utilizes MeshDistanceMaterial instead of MeshDepthMaterial.

    object.customDistanceMaterial = new THREE.MeshDistanceMaterial( {
    alphaMap: alphaTex,
    alphaTest: 0.5,
}

    JSFiddle Example