React three fiber directional light don't cast proper shadow

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.


Directional Light

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.

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

Thank you so much for your reply. It worked.