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?
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
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;
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]);
yeah deffo looks like it needs some light.shadow.bias
Maybe I’m the only one actually liking these artifacts – they look like the texture of wood.
3 Likes
thanks mjurczyk its working…
but shadow is not looking good…