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

- Tiffany

Answer 1

这是因为定向光使用正交相机来绘制阴影图以产生阴影。如果有物体在此相机视野之外，则无法计算其阴影，这就导致了你在绿框之外看到的效果。如果要扩大此相机覆盖的范围，可以修改此阴影相机的.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没有任何作用，因为正交相机不使用视场属性。

- Marquizzo

---

嗨，感谢您的回复。我尝试更改 light.shadow.camera.top / light.shadow.camera.bottom / light.shadow.camera.left / light.shadow.camera.right，但是没有任何反应 :( 我已经编辑了我的问题。 - Tiffany

先尝试直接更改值，然后再将其添加到GUI中。否则，您会同时添加太多更改，而无法确定哪个部分正在破坏它。 - M -

Answer 2

好的，如果您能向我展示代码的实际案例就太好了，因为我之前曾经在 boxelizer.com 的一个项目中解决过类似的问题。

正如之前建议的那样，可以通过更改light.shadow.camera.left, right, bottom and top属性来解决这个问题，但是我们可能看不到阴影的有效区域，因此我们可能真的很接近修复它，但实际上并没有。我的建议是暂时使用帮助程序，只需查看您的灯光的有效阴影区域：

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

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

- Xedret

---

嗨，我已经在我的问题中添加了完整的代码。我使用new THREE.CameraHelper( light.shadow.camera )并发现比例太小了。你能告诉我如何解决吗？谢谢！！ - Tiffany

@Tiffany，我想我在这里发现了问题，请不要在GUI小部件内定义light.shadow.camera.left、right、bottom和top的值，请在调用场景中的光之前定义它们，我敢打赌这应该可以解决你的问题。（如果可以的话，我会编辑我的答案） - Xedret

它可以工作！但是看起来很奇怪。这里是截图：https://i.imgur.com/YkkCXEE.png。 - Tiffany

哦，你说得对，看起来很奇怪。舞台上有多少个投射阴影的定向光？ - Xedret

也许我应该在stackoverflow上创建一个问题来询问这个。CameraHelper 真的帮了我很多，谢谢！ - Tiffany

Answer 3

这是我用来设置阴影贴图尺寸和覆盖区域的函数：

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

- manthrax