I’m encountering an issue where the shadow of my GLTF model appears pixelated in my react-three-fiber scene.
I’ve already set up shadow properties on both the model and scene elements, but the shadow remains jagged. Below is the code I’m using, which includes the lighting, shadow configuration, and material settings.

JAVASCRIPTCopied
import { useGLTF, ContactShadows } from '@react-three/drei';
import { useEffect, useRef } from 'react';
import { PerspectiveCamera } from 'three';
import * as THREE from 'three';
import { useFrame } from 'react-three-fiber';
import { FrontSide } from 'three';

const Model = () => {
  console.log('mainscene');
  const gltf = useGLTF('src/assets/model/sophia_new.gltf');
  const group = useRef();
  const mixer = useRef(); // Ref for the AnimationMixer
  const directionalLightRef = useRef();

  useEffect(() => {
    if (gltf.animations && gltf.animations.length) {
      mixer.current = new THREE.AnimationMixer(gltf.scene);
      gltf.animations.forEach((clip) => {
        const action = mixer.current.clipAction(clip);
        action.play();
      });
    }

    return () => {
      if (mixer.current) {
        mixer.current.stopAllAction();
        mixer.current.uncacheRoot(gltf.scene);
        mixer.current = null;
      }
    };
  }, [gltf]);

  useEffect(() => {
    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
      }

      if (child.material) {
        child.material.side = FrontSide;
      }
    });
  }, [gltf.scene]);

  useFrame((state, delta) => {
    if (mixer.current) mixer.current.update(delta);
  });

  return (
    <>
      <primitive
        object={gltf.scene}
        ref={group}
        scale={[0.8, 0.8, 0.5]}
        position={[0, -2, -0.16]}
        rotation={[0, -Math.PI / 2, 0]}
        castShadow
      />
      <mesh
        position={[0, -2.5, -0.16]}
        rotation={[-Math.PI / 2, 0, 0]}
        receiveShadow
      >
        <planeGeometry args={[50, 50]} />
        <meshStandardMaterial color="red" />
      </mesh>
      <ambientLight intensity={2.5} />
      <directionalLight
        ref={directionalLightRef}
        position={[5, 10, 0]} //5*10*0
        intensity={5}
        castShadow
        shadow-mapSize-width={1050}
        shadow-mapSize-height={1050}
        shadow-bias={0.800}
        shadow-radius={40}
      />
    </>
  );
};

export default Model;

I’d appreciate any suggestions or techniques to reduce the pixelation in the shadow rendering. Thanks!