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?
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
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.