Three.js-为什么阴影只在很小的区域显示

Question

我导入了一个模型，发现阴影只显示在很小的区域（图片中的绿色区域）。我该怎么做才能让所有对象都显示出阴影。

这是我的代码。

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
light.castShadow = true;
light.shadow.camera.near = 0.01; // same as the camera
light.shadow.camera.far = 1000; // same as the camera
light.shadow.camera.fov = 50; // same as the camera
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
scene.add( light );

谢谢！

编辑：

我添加gui来更改light.shadow.camera.top / light.shadow.camera.bottom / light.shadow.camera.left / light.shadow.camera.right，但是什么也没发生。

var gui = new dat.GUI();
gui.add( light.shadow.camera, 'top' ).min( 1 ).max( 100000 ).onChange( function ( value ) {
    light.shadow.camera.bottom = -value;
    light.shadow.camera.left = value;
    light.shadow.camera.right = -value;
});

Answer 1

之所以发生这种情况，是因为定向光使用OrthographicCamera绘制阴影图以投射阴影。如果此摄像机视野之外还有其他物体，它将无法计算其阴影，并具有在绿色框外看到的效果。如果要扩展此摄像机所覆盖的区域，可以修改此阴影摄像机的.left .right .top .bottom属性以覆盖整个场景。在下面的示例中，我使用的是100个单位的盒子；

var side = 100;
light.shadow.camera.top = side;
light.shadow.camera.bottom = -side;
light.shadow.camera.left = side;
light.shadow.camera.right = -side;

...但是您可以将尺寸更改为所需的尺寸。请记住，.fov在示例代码中不执行任何操作，因为正交摄影机不使用视野属性。

Answer 2

好的，如果您能向我展示您的代码的实时示例，那将是非常不错的，因为我之前已经为boxelizer.com

中的项目修复了该示例

可以按照之前的建议通过更改 light.shadow.camera.left，right，bottom和top属性来解决此问题，但是我们可能无法看到有效区域阴影可能存在，因此我们可能真的很接近要修复它，但根本没有。我的建议是暂时使用辅助器，以便通过以下方式查看光线的有效阴影区域：

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

也欢迎您在引用的链接中看到我使用的所有代码。

Answer 3

这是我用来设置shadowMap尺寸和覆盖范围的函数：

//sz is the size in world units that the shadow should cover. (area)
// mapSize is the width,height of the texture to be used for shadowmap (resolution)
    var setShadowSize=(light1, sz, mapSz)=>{
        light1.shadow.camera.left = sz;
        light1.shadow.camera.bottom = sz;
        light1.shadow.camera.right = -sz;
        light1.shadow.camera.top = -sz;
        if(mapSz){
            light1.shadow.mapSize.set(mapSz,mapSz)
        }
    }
    setShadowSize(myLight,15.0,1024);