After applying 'receiveShadow' model looks badly

Questions
1

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

i used above code for add a shadow on my model also. i used received shadow on same model. but when i used this the model looks badly and when i removed it same model looks perfect. what is the wrong with the code?

2

Hard to understand from just “looks bad” what’s actually happening. My wild guess is shadow acne - in which case make sure all materials on the model have “.side” set to FrontSide.

1 Like
3

modelbug
modelbug1557Ă—454 137 KB

it changes when and looks bad after i apply receiveShadow onit.

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";
const Model = () => {
  console.log("mainscene");
  const gltf = useGLTF('src/assets/model/GirlLoop.glb');
  const group = useRef();
  const mixer = useRef(); // Ref for the AnimationMixer

  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;
      }  
    });
  }, [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.8]}
        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={1.5}/>
      <directionalLight
        position={[5, 10, 0]}
        intensity={5}
        castShadow
        shadow-mapSize-width={1024}
        shadow-mapSize-height={1024}
        
      />
 
    </>
  );
};

export default Model;
4

Yup, then as above:

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

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

Maybe is shadow.bias

1 Like
6

yeah deffo looks like it needs some light.shadow.bias

7

Maybe I’m the only one actually liking these artifacts – they look like the texture of wood.

3 Likes
9

thanks mjurczyk its working…
but shadow is not looking good…

model
model532Ă—755 187 KB