Three.js shadow shadow is clipped

1. Problem description

        Use the parallel light to turn on the shadow, and when the shadow shadow is generated, the shadow is clipped in some places. And the part of the shadow clipping is like outside the view frustum of the camera.

2. The cause of the problem

        The shadow has a shadow boundary attribute, because the light rays are parallel, and the shadow area is similar to the field of view of the orthographic camera.

        shadow.camera.near: (0.5) Projection near point. Indicates at what distance from the light source the shadows start to be generated.

        shadow.camera.far: (500) projection far point. Indicates to which distance from the light source shadows can be generated.

        shadow.camera.left: (-5) projection left border.

        shadow.camera.right: (5) The right border of the projection.

        shadow.camera.top: (5) Projection upper boundary.

        shadow.camera.bottom: (-5) The bottom boundary of the projection. 

       Note: where left and bottom are negative numbers.

So the reason for the clipping is probably that the shadow goes beyond the bounds you set. Far and near are excluded, because the shadow is not clipped from far to near, so it can only be the upper, lower, left, and right boundaries.

3. Problem solving

        Set the shadow's camera's upper, lower, left, and right borders to be larger. The following code snippet:

    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    
    const light = new THREE.DirectionalLight(0xffffff, 1, 100)
    light.position.set(1, 4.3, 2.5)  // default
    scene.add(light)  // Add soft white light to the scene.
    
    light.shadow.mapSize.width = 1024  // default
    light.shadow.mapSize.height = 1024  // default
    light.shadow.camera.near = 0.05  // default
    light.shadow.camera.far = 500  // default
    
    //将范围调大
    light.shadow.camera.top = 20
    light.shadow.camera.right = 20
    light.shadow.camera.left = -20
    light.shadow.camera.bottom = -20
    light.castShadow = true