GLTF models not casting shadows: React three fiber.

Questions
,
1

Hi I have this piece of code here where I am loading two different gltf models. I have enabled shadows on all the meshes in each of them. The canvas shadows have also been enabled. Also enabled meshes and added cast shadow and receive shadow properties to the lights as well. But nothing seems to be working. The models are showing up perfectly but without the shadows. This makes the overall scene look extremely flat. Following is my code:

import {OrbitControls,useGLTF,Environment,Html,ContactShadows} from "@react-three/drei"
import {useLoader} from "@react-three/fiber"
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
import { useEffect, useRef } from "react"
import { Group,PerspectiveCamera, SpotLight ,DirectionalLight} from "three"


export default function Object(){

    // When loading the GLTF model
    const gltf = useLoader(GLTFLoader, '/scene.gltf')
    const bg=useLoader(GLTFLoader,'/bg.gltf')
    const group = useRef()
    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

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

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

  useEffect(() => {
    camera.position.set(5,5,5)
    camera.lookAt(0,-3.5,-0.2)
  }, [camera])

    

    return<>
      <OrbitControls
        enableZoom={true}
        maxDistance={15}
        minDistance={1}
        minAzimuthAngle={-Math.PI / 8}  // Limit to 45 degrees to the left
        maxAzimuthAngle={Math.PI / 8} 
      />

       <primitive object={bg.scene} ref={group} scale={[0.8, 0.8, 0.8]} position={[0,-2,-0.16]} rotation={[0, -Math.PI / 2, 0]} castShadow/>
       <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]}/>
        <meshBasicMaterial color="lightblue"/>
       </mesh>

       <directionalLight position={[2,3,-0.16]} intensity={5} castShadow shadow-mapSize-width={1024}
       shadow-mapSize-height={1024}
      />
       <ambientLight intensity={5}/>
       <ContactShadows frames={10} position={[0,-2,-0.16]} rotation={[0,-Math.PI/2,0]} scale={0.8} opacity={0.1} blur={0.5} color='black'/>
       
    </>
}
2

Your ambient light is very bright

2 Likes
3

Heyy Sean thanks lowering the ambient light intensity definitely helped. But my main issue currently is my models are not casting any shadows on the floor which is essentially the plane. So in the body of the scene you can see the shadows working but in the place where the models are sitting on the plane there is no shadow. :frowning:

4

Your plane is using meshBasicMaterial. It won’t receive shadows.
Try meshStandardMaterial

5

Yes I implemented that it works now thank you!! also the contact shadows from drei library does not seem to be working. Do you have any fixes for that?

6

You have a lot of settings in your contact shadows.
I suggest removing all of them, except for position, and then re add them one by one, to see if it benefits your application.

<ContactShadows position={[0, -2, -0.16]} />

1 Like
7

Thanks so much! This really helped!! :smiley: