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

我导入了一个模型，发现阴影仅在很小的区域(图片中的绿色区域)显示。我该怎么做才能让所有物体都显示出阴影。



这是我的代码。

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;
});

最佳答案

好的，如果您可以向我展示您的代码的实时示例，那就太好了，因为我之前已经为boxelizer.com中的项目修复了此示例

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

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

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