# GLTF models not casting shadows: React three fiber.

**URL:** <https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780>\
**Category:** Questions\
**Tags:** shadows, react-three-fiber\
**Created:** [November 5, 2023, 3:19pm UTC](https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780 "2023-11-05T15:19:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Diya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diya/32/41337_2.png) [@Diya](https://discourse.threejs.org/u/Diya)\
**Post date:** [November 5, 2023, 3:19pm UTC](https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780/1 "2023-11-05T15:19:35Z")

</div>

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:

```javascript
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'/>
       
    </>
}

```

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 5, 2023, 3:28pm UTC](https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780/2 "2023-11-05T15:28:47Z")

</div>

Your ambient light is very bright

---

<div class="post-metadata">

**Author:** ![Diya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diya/32/41337_2.png) [@Diya](https://discourse.threejs.org/u/Diya)\
**Post date:** [November 5, 2023, 3:33pm UTC](https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780/3 "2023-11-05T15:33:03Z")

</div>

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. ☹

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 5, 2023, 4:10pm UTC](https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780/4 "2023-11-05T16:10:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Diya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diya/32/41337_2.png) [@Diya](https://discourse.threejs.org/u/Diya)\
**Post date:** [November 5, 2023, 4:21pm UTC](https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780/5 "2023-11-05T16:21:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 5, 2023, 4:37pm UTC](https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780/6 "2023-11-05T16:37:55Z")

</div>

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]} />`

---

<div class="post-metadata">

**Author:** ![Diya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diya/32/41337_2.png) [@Diya](https://discourse.threejs.org/u/Diya)\
**Post date:** [November 6, 2023, 4:07am UTC](https://discourse.threejs.org/t/gltf-models-not-casting-shadows-react-three-fiber/57780/7 "2023-11-06T04:07:13Z")

</div>

Thanks so much! This really helped!! 😃