# React three fiber directional light don't cast proper shadow

**URL:** <https://discourse.threejs.org/t/react-three-fiber-directional-light-dont-cast-proper-shadow/46208>\
**Category:** Questions\
**Tags:** materials\
**Created:** [December 25, 2022, 9:27am UTC](https://discourse.threejs.org/t/react-three-fiber-directional-light-dont-cast-proper-shadow/46208 "2022-12-25T09:27:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![berkaydurur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/berkaydurur/32/32056_2.png) [@berkaydurur](https://discourse.threejs.org/u/berkaydurur)\
**Post date:** [December 25, 2022, 9:27am UTC](https://discourse.threejs.org/t/react-three-fiber-directional-light-dont-cast-proper-shadow/46208/1 "2022-12-25T09:27:26Z")

</div>

Hi everyone. I am new to Three and React Fiber. My problem is about a directional light shadow. I need to add directional light that casts a shadow but only some meshes create the shadow. Tried spotlight and it worked fine.

I checked every mesh’s castShadow properties. The problem is not castShadow property.

Spotlight

 ![spotlight](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/7/e7abb323b3dfdebf7b236b200386d00aa4db5e3c.png)

Directional Light

 ![directional](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/b/bbdf02b6bdd7911315bad97b8b6246aa29aeb784.png)

This is my Light component.

`
function Lights(props){
const light = useRef()
const light2 = useRef()
useHelper(light, SpotLightHelper, ‘cyan’)
useHelper(light2, DirectionalLightHelper, ‘red’)
return (
<>
<directionalLight ref={light2} intensity={0.5} position={[0, 20, 0]} shadow-radius={5} castShadow>
```
</>

```
`

`)
}
`

Thanks for your help.

---

<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:** [December 25, 2022, 11:18pm UTC](https://discourse.threejs.org/t/react-three-fiber-directional-light-dont-cast-proper-shadow/46208/2 "2022-12-25T23:18:48Z")

</div>

> **[React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/api/objects)**
>
> React-three-fiber is a React renderer for three.js

```diff
- <directionalLight
- castShadow
- position={[2.5, 8, 5]}
- shadow-mapSize={[1024, 1024]}
- shadow-camera-far={50}
- shadow-camera-left={-10}
- shadow-camera-right={10}
- shadow-camera-top={10}
- shadow-camera-bottom={-10}
- />
+ <directionalLight castShadow position={[2.5, 8, 5]} shadow-mapSize={[1024, 1024]}>
+ <orthographicCamera attach="shadow-camera" args={[-10, 10, 10, -10]} />
+ </directionalLight>

```

Directional light uses an orthographic shadow camera, if that’s filming too narrow the shadow map is cut off. Either set the props same way you’d do it always, or dash-pierce, or just give it a shadow camera

---

<div class="post-metadata">

**Author:** ![Berkay\_Durur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/berkay_durur/32/31944_2.png) [@Berkay\_Durur](https://discourse.threejs.org/u/Berkay_Durur)\
**Post date:** [December 26, 2022, 7:11am UTC](https://discourse.threejs.org/t/react-three-fiber-directional-light-dont-cast-proper-shadow/46208/3 "2022-12-26T07:11:15Z")

</div>

Thank you so much for your reply. It worked.