Can't figure out how to get shadows to work with react-three-fiber

user_15677773 0
Viewed 923

I've been following some tutorials to make this simple sandbox with a test .glb file.

https://codesandbox.io/s/zen-black-et9cs?file=/src/App.js

Everything seems to work except the shadows. I can't find any missing castShadow/recieveShadow/shadowMap declarations anywhere... just not sure what I'm missing.

Thanks if you can point to my mistake!

react-three-fiber three.js
2 Answers

Increasing the shadow map size to such a high value is no good approach since it's bad for performance.

Instead, decrease the frustum of the shadow camera. Use the following values:

shadow-camera-near={0.1}
shadow-camera-far={20}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}

Keep in mind that you can visually debug and thus better optimize the shadow camera by using THREE.CameraHelper.

user_52508470

I figured it out - it was the shadow-mapSize-width and height. 1024 wasn't enough, I had to bump that number much bigger (works at 10240). Not sure why this is the case, perhaps my imported model is of a different scale or something. But it works now!

user_156777730
Related