Alpha Masked Shadows in Three.js

Based on your fiddle, I can see you're trying to create a shadow that matches the alpha mask of your plane. The issue is that by default, Three.js doesn't consider alpha transparency when calculating shadows.

To achieve shadows that respect the alpha mask of your material, you need to modify a few settings:

1. First, you need to set alphaTest on your material to discard fragments below a certain opacity threshold
2. Make sure your material has transparent: true set
3. Ensure your texture's alpha channel is properly loaded and used

Here's how you can modify your code:

JAVASCRIPTCopied
// Load texture with alpha
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-big.jpg');
const alphaMap = textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-alpha.jpg');

// Create material with proper alpha settings
const material = new THREE.MeshStandardMaterial({
  map: texture,
  alphaMap: alphaMap,
  transparent: true,
  alphaTest: 0.5,  // This is crucial for shadow casting with alpha
  side: THREE.DoubleSide
});

// Make sure the plane casts and receives shadows
planeMesh.castShadow = true;
planeMesh.receiveShadow = true;

The key property here is alphaTest, which tells Three.js to discard fragments with alpha values below the specified threshold when rendering, including during shadow map generation.

If you're using a texture that already has an alpha channel (rather than a separate alphaMap), you would just need to set:

JAVASCRIPTCopied
const material = new THREE.MeshStandardMaterial({
  map: textureWithAlpha,
  transparent: true,
  alphaTest: 0.5,
  side: THREE.DoubleSide
});

Also ensure your renderer and lights are properly configured for shadows:

JAVASCRIPTCopied
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Optional: for softer shadows

directionalLight.castShadow = true;
// Optionally adjust shadow camera parameters for better quality
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.left = -10;
directionalLight.shadow.camera.right = 10;
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.camera.bottom = -10;
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;

These changes should help your shadows respect the alpha mask of your plane.