why shadow becomes blurred in Three.js

Question

In a normal scenario, the shaow look like this

But after I modified the parameters ofdirectionalLight.shadow.camera

directionalLight.shadow.camera.left = -50
directionalLight.shadow.camera.right = 50
directionalLight.shadow.camera.top = -50
directionalLight.shadow.camera.bottom = 50

It became like this

How to resolve this problem?

https://jsfiddle.net/JesseLuo/z1m6uffu/12/

Answer 1

Shadows are simulated using a "camera" in the location of the light source, and that camera's frustum (or, its field of view) and resolution determine how precisely the shadow matches your object. You can't have perfectly detailed shadows covering large areas, so you need to tune the shadow camera to the part of the scene that's important. In this case, when you change the parameters to expand the camera's frustum, you've spread it over a larger area and lost precision.

To improve the result you can:

A. Increase the shadowMap's resolution. Higher values give better quality shadows at the cost of computation time. Values must be powers of 2.

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024; 

B. Change the shadow type. PCFSoft may look better, but doesn't perform as well.

renderer.shadowMap.type = THREE.PCFSoftShadowMap;

C. Reduce the dimensions of the shadow camera frustum to just the area you need to cover. Use a CameraHelper to see where the shadows are covering, like in this example .

scene.add( new THREE.CameraHelper( light.shadow.camera ) );

See THREE.LightShadow docs for more information.