Three.js shadow阴影被剪切

1.问题描述

        使用平行光开启shadow，在生成shadow阴影的时候在某些地方出现阴影被剪切的情况。而且阴影剪切的部分像是相机视锥体视野外。

2.问题原因

        shadow有阴影边界属性，因光线都是平行的，阴影区域类似正投影相机的视野。

        shadow.camera.near：(0.5)投影近点。表示距离光源的哪一个位置开始生成阴影。

        shadow.camera.far：(500)投影远点。表示到距离光源的哪一个位置可以生成阴影。

        shadow.camera.left：(-5)投影左边界。

        shadow.camera.right：(5)投影右边界。

        shadow.camera.top：(5)投影上边界。

        shadow.camera.bottom：(-5)投影下边界。 

       注：其中left和bottom为负数。

所以出现剪切的原因可能是阴影超出了设定的边界。排除了远近，因为阴影被剪切不是从远到近的，所以只能是上下左右边界了。

3.问题解决

        将shadow的camera上下左右边界设置更大。如下代码片段：

    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