Three.js shadows not working properly

Question

I was trying to learn about shadows in Three.js and I found this nice example in jsfiddle. However I am not able to understand why, when I lower the y of light to like 65, that is:

light.position.set( 20, 65, 0 );

the shadow disappears completely. Meanwhile, everything above 70 is perfectly fine and the shadow is cast. Like always, I am probably missing something obvious, but I really cannot see what can be preventing the light from making that shadow.

Answer 1

You can try:

light.shadowCameraVisible = true;

To see the position and direction of the light on screen this will help you to understand what is changing.

Hope it helps :)

Answer 2

This is happening because shadows will only be cast by and onto objects inside the frustrum of the light.shadowCamera; in this case, the default light.shadowCameraNear appears to be set to about 50, so the frustrum begins too far from the light source, and when the light's position.y is at 65 the bar isn't included. When the light's position.y is 70, the closest edge of the shadowCamera frustrum moves up to include the bar, and the shadow is cast properly.

You can fix this by setting light.shadowCameraNear to a smaller number. In that fiddle, uncomment the line:

light.shadowCameraNear = 1;

and the shadow will appear no matter how low you move the light.