# 3D Model doesn't cast shadow

**URL:** <https://discourse.threejs.org/t/3d-model-doesnt-cast-shadow/24596>\
**Category:** Questions\
**Tags:** shadows, react-three-fiber\
**Created:** [March 21, 2021, 10:06am UTC](https://discourse.threejs.org/t/3d-model-doesnt-cast-shadow/24596 "2021-03-21T10:06:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![samuel\_potter](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/samuel_potter/32/17192_2.png) [@samuel\_potter](https://discourse.threejs.org/u/samuel_potter)\
**Post date:** [March 21, 2021, 10:06am UTC](https://discourse.threejs.org/t/3d-model-doesnt-cast-shadow/24596/1 "2021-03-21T10:06:44Z")

</div>

Hi,  
I’m experimenting three.js on React. I’ve loaded a 3D model that I exported in a .glb with blender.  
[Lotus 3D Model](https://sketchfab.com/3d-models/lotus-flower-9e7321596cd74adba98e7f410fb65990)

B ut when I try to make it cast a shadow, nothing happens. Being new to threeJS I cast the shadow the same way as you cast it on a build in component like sphere etc.

```
import { Loader, OrbitControls } from "@react-three/drei"

import { Suspense } from "react"

import { Canvas } from "react-three-fiber"

import { Model } from "./Robot"

import "./App.css"

export const Home = () => {

    

    return (

        <>

        <Canvas shadowMap colorManagement >

            <ambientLight intensity={0.3} />

            <directionalLight

                castShadow 

                position={[0, 10, 0]}

                intensity={1.5} 

                shadowMapHeight={1024} 

                shadowMapWidth={1024} 

                shadowCameraFar={50} 

                shadowCameraLeft={-10} 

                shadowCameraRight={10}

                shadowCameraTop={10}

                shadowCameraBottom={-10} />

            <pointLight position={[-10, 0, -20]} intensity={0.5} />

            <pointLight position={[0, -10, 0]} intensity={1.5} />

            <group>

                <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -2, 0]} >

                    <planeBufferGeometry attach="geometry" args={[100, 100]} />

                    <shadowMaterial attach="material" opacity={0.3} />

                </mesh>

            </group>

            <Suspense fallback={null}>

                <mesh castShadow>

                    <Model scale={[0.2, 0.2, 0.2]} url="/lotusModel.glb" />

                </mesh>

            </Suspense>

            <OrbitControls autoRotate />

        </Canvas>

        <Loader />

        </>

    )

}
```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 21, 2021, 11:05pm UTC](https://discourse.threejs.org/t/3d-model-doesnt-cast-shadow/24596/2 "2021-03-21T23:05:53Z")

</div>

in order to cast shadows meshes must have receiveShadow and castShadow props. when you load a model via GLTFLoader it gives you a scene with nested meshes, none of which have these props. if you use vanilla three you’d now traverse it and mutate the data which is not optimal. in react you could do the same, but better use [GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components](https://github.com/pmndrs/gltfjsx)