ThreeJS - Point light shadow acting like a spot light

Question

I have a scene with and ambient light and a point light, and I would like to have shadows underneath the meshes as in the picture, but there is a shadow area around the central part.

It looks like the point light is casting shadows as if it was a spot light. If I reduce the light.position.z the gray area disappears but the position of the shadow changes (they are no more under the meshes).

I created a fiddle with the code: https://jsfiddle.net/ytmc6kxm/1/

How can I get rid of the gray area around the circle without reducing the distance? Can I do that with a directional light? Why don't I see any shadow with the directional light?

Thank you!

Answer 1

A directional shadow uses an orthographic projection, which requires a proper window. The default window from -5 to 5 does not cover your entire scene. Adding

light.shadow.camera.left = -300
light.shadow.camera.top = -300
light.shadow.camera.right = 300
light.shadow.camera.bottom = 300

makes shadows appear when using a directional light.

As for why the point shadow gets clipped, it seems to be a bug in three.js, related to this line in shadowmap_pars_fragment.glsl:

    // dp = distance from light to fragment position
    float dp = ( length( lightToPosition ) - shadowBias ) / 1000.0;

The scaling parameter puts everything in shadow that is more than 1000 units away from the point light. The other shadow types get the depth directly using projected coordinates in shadow space, so they don't have this overflow problem. Substituting SpotLight for PointLight "fixes" the problem. Why is the point light implemented like this? No idea. The correct way forward is to post an issue to the three.js guys.