Odd looking shadow with three.js

Question

Very new to three.js and webgl and I am getting very strange looking shadows with a directional light.

Here is my code for the renderer:

this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;
this.renderer.shadowCameraNear = 3;
this.renderer.shadowCameraFar = this.camera.far;
this.renderer.shadowCameraFov = 75;
this.renderer.shadowMapBias = 0.0039;
this.renderer.shadowMapDarkness = 0.5;
this.renderer.shadowMapWidth = 1024;
this.renderer.shadowMapHeight = 1024;

Any ideas?

Answer 1

This results from the way that DirectionLight is created in three.js (I had this question before). The approach used in three.js for a direction light is about the same as any other shadow creation: it creates a shadow map. With a directional light this shadow map is created with an orthogonal camera. So think about your light as the same as an OrthogonalCamera and think about how those view the scene. The light views the scene from the angle of the directional light, and creates a shadow map based on that view. This view of course has a different projection matrix than your camera. The main camera projection thus must transform the shadow to appear in its view. This results in shadows that look as your image shows. Indeed, the pixelation of that shadow reveals how the shadow camera is oriented, and its scale.

There's no way in three.js to create a true orthogonal shadow using the standard lights. Getting the ideal coverage of the shadow map from the camera's perspective is also not possible.

Answer 2

The problem is that your light source is too large for the object you are shadowing. You can visualize the shadow camera by setting

light.shadowCameraVisible = true

Then try reducing the size of your light source by varying the parameter d below

light.shadowCameraLeft = -d
light.shadowCameraRight = d
light.shadowCameraTop = d
light.shadowCameraBottom = -d