Reputation: 55
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
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
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