CODEWITHSUNDEEP
three.jsreact-three-fiber
SavanaPope
SavanaPope

Reputation: 55

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

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!

Upvotes: 1

Views: 3063

Answers (2)

Mugen87
Mugen87

Reputation: 31086

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.

Upvotes: 2

SavanaPope
SavanaPope

Reputation: 55

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!

Upvotes: 0

Related Questions