Troubleshooting Shadows in React Three Fiber

Looking at your code, I can identify several issues that might be preventing your shadows from rendering correctly:

Key Issues

1. Missing receiveShadow property: You're setting castShadow on your meshes, but you need something to receive the shadows as well.

2. Missing shadow camera configuration: Your directional light needs proper shadow camera settings.

3. Canvas configuration: You need to ensure the renderer has shadows enabled.

4. Conflicting shadow solutions: You're using both ContactShadows and trying to implement standard shadows.

Recommended Fixes

1. Enable Shadow Rendering in Canvas

Make sure your Canvas component has shadows enabled:

JSXCopied
<Canvas shadows>
  {/* Your scene content */}
</Canvas>

2. Update Your Model Component

JSXCopied
const Model = () => {
  const gltf = useGLTF('src/assets/model/GirlLoop.glb');
  const group = useRef();
  
  // Set both castShadow and receiveShadow
  useEffect(() => {
    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
      }
    });
  }, [gltf.scene]);

  return (
    <>
      <OrbitControls
        enableZoom={true}
        maxDistance={15}
        minDistance={1}
        minAzimuthAngle={-Math.PI / 8}
        maxAzimuthAngle={Math.PI / 8}
      /> 
      <primitive 
        object={gltf.scene} 
        ref={group} 
        scale={[0.8, 0.8, 0.8]} 
        position={[0, -2, -0.16]} 
        rotation={[0, -Math.PI / 2, 0]} 
      />
      
      {/* Improved directional light with shadow camera settings */}
      <directionalLight 
        position={[2, 3, -0.16]} 
        intensity={5} 
        castShadow 
        shadow-mapSize-width={1024} 
        shadow-mapSize-height={1024}
        shadow-camera-far={15}
        shadow-camera-left={-5}
        shadow-camera-right={5}
        shadow-camera-top={5}
        shadow-camera-bottom={-5}
      /> 
      
      <ambientLight intensity={0.5} /> {/* Reduced intensity to make shadows more visible */}
      
      {/* Add a floor to receive shadows */}
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2, 0]} receiveShadow>
        <planeGeometry args={[10, 10]} />
        <shadowMaterial opacity={0.4} />
      </mesh>
    </>
  );
}

3. Choose One Shadow Approach

You're currently mixing ContactShadows (which is a screen-space effect) with standard shadow mapping. Choose one:

• For standard shadows: Use the directional light with shadow settings and a floor mesh as shown above.
• For contact shadows: Use the ContactShadows component, but you won't need to set castShadow on your meshes.

4. Debug Shadow Camera

If you're still having issues, you can visualize the shadow camera to ensure it's properly positioned:

JSXCopied
import { useHelper } from '@react-three/drei';

// Inside your component:
const directionalLightRef = useRef();
useHelper(directionalLightRef, THREE.DirectionalLightHelper, 1);
useHelper(directionalLightRef, THREE.CameraHelper);

// Then in your JSX:
<directionalLight 
  ref={directionalLightRef}
  // other props as before
/>

These changes should help you get your shadows working correctly. The key is ensuring you have both objects casting shadows and objects receiving them, with proper light configuration and renderer settings.