Model shadow looks pixelated. How to fix this.?

Questions
1

shadow
shadow421×322 2.08 KB

Model shadow is looking pixelated. i do following code…

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;