Shadow Rendering Issues in Three.js

The issue you're experiencing with receiveShadow = true causing poor rendering of your GLTF model could be related to several factors:

Possible Causes

1. Shadow Map Configuration: Your renderer's shadow map settings might not be properly configured.

2. Light Setup: The position, intensity, or shadow properties of your lights might be causing the issue.

3. Material Compatibility: Some materials or shaders in your GLTF model might not handle shadows correctly.

Recommended Solutions

1. Check your WebGLRenderer shadow settings

Make sure your renderer has shadows properly enabled with appropriate settings:

JAVASCRIPTCopied
// Configure renderer
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Try different types

2. Verify your light configuration

Ensure your lights are properly set up to cast shadows:

JAVASCRIPTCopied
// Example for a directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);
directionalLight.castShadow = true;

// Configure shadow properties
directionalLight.shadow.mapSize.width = 1024;  // Higher resolution
directionalLight.shadow.mapSize.height = 1024; // Higher resolution
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;

3. Selective shadow receiving

Instead of enabling receiveShadow for all meshes, try being more selective:

JAVASCRIPTCopied
useEffect(() => {
    gltf.scene.traverse((child) => {
        if (child.isMesh) {
            child.castShadow = true;
            
            // Only enable receiveShadow for ground/large objects
            if (child.name.includes('ground') || child.name.includes('floor')) {
                child.receiveShadow = true;
            }
        }
    });
}, [gltf.scene]);

4. Try different shadow map types

Experiment with different shadow map types to see which works best with your model:

JAVASCRIPTCopied
renderer.shadowMap.type = THREE.BasicShadowMap;
// or
renderer.shadowMap.type = THREE.PCFShadowMap; // Default
// or
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// or
renderer.shadowMap.type = THREE.VSMShadowMap;

Each type offers different quality and performance tradeoffs, so you might need to experiment to find the best option for your specific model.