Improving DirectionalLight Shadows in Three.js

To achieve clear, consistent shadows across your entire scene with a directional light (simulating sunlight), you need to make several adjustments to your current setup. The main issues with your current implementation are:

1. Shadow map resolution is too low
2. Shadow camera frustum is not properly configured
3. Light position may not be optimal

Here's how to improve your directional light setup:

JAVASCRIPTCopied
// Create directional light with higher intensity
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.castShadow = true;

// Increase shadow map resolution for sharper shadows
directionalLight.shadow.mapSize.width = 2048;  // Higher resolution
directionalLight.shadow.mapSize.height = 2048; // Higher resolution

// Position the light to simulate sun
directionalLight.position.set(50, 200, 100); // Adjust based on your scene scale

// Configure shadow camera (crucial for full-scene shadows)
// Adjust these values based on your scene size
const d = 200;
directionalLight.shadow.camera.left = -d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = -d;

// Adjust near and far planes based on your scene
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 500;

// Improve shadow quality
directionalLight.shadow.bias = -0.0005; // Reduces shadow acne
directionalLight.shadow.normalBias = 0.05; // Can help with thin objects

scene.add(directionalLight);

// Optional: Add a helper to visualize the light's shadow camera
// const helper = new THREE.CameraHelper(directionalLight.shadow.camera);
// scene.add(helper);

Key Improvements:

1. Higher shadow map resolution: Increasing from 512 to 2048 will give you much sharper shadows.

2. Shadow camera frustum configuration: The left, right, top, and bottom properties define the area where shadows will be rendered. Make sure this area covers your entire scene.

3. Light positioning: Position the light appropriately for your scene to simulate sunlight.

4. Shadow bias adjustment: Helps prevent shadow acne (those strange patterns that sometimes appear on surfaces).

5. Optional helper: Uncomment the helper code to visualize the shadow camera's frustum, which can help you adjust its size correctly.

Remember to also ensure that all objects in your scene have their castShadow and/or receiveShadow properties set to true as appropriate.