ThreeJS中的阴影距离问题答案

【问题标题】：Shadows Distance problems in ThreeJSThreeJS中的阴影距离问题
【发布时间】：2021-04-08 08:08:00
【问题描述】：

我目前正在为我的场景使用定向照明。一个小角色可以四处走动。所有阴影都有效。但是，如果我开始对头像走得更远一点，阴影就不再适用了。我认为它可能来自光线的角度，但我无法改变它。我可以在阴影/非阴影区域周围画一个正方形。

这是我的代码。大量的数字可供我测试

                const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
                dirLight.color.setHSL( 0.1, 1, 0.95 );
                dirLight.position.set( - 1, 1.75, 1 );
                dirLight.position.multiplyScalar( 30 );
                dirLight.distance = 1200;
                dirLight.focus = 1200;
                dirLight.angle = Math.PI / 1;
                scene.add( dirLight );

                dirLight.castShadow = true;

                dirLight.shadow.mapSize.width = 2048;
                dirLight.shadow.mapSize.height = 2048;

                const d = 100;

                dirLight.shadow.camera.left = - d;
                dirLight.shadow.camera.right = d;
                dirLight.shadow.camera.top = d;
                dirLight.shadow.camera.bottom = - d;

                dirLight.shadow.camera.far = 35000;
                dirLight.shadow.bias = - 0;

                const dirLightHelper = new THREE.DirectionalLightHelper( dirLight, 10 );
                scene.add( dirLightHelper );

这是接收阴影的地面代码

const groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
                const groundMat = new THREE.MeshLambertMaterial( { color: 0xffffff } );
                groundMat.color.setHSL( 0.095, 1, 0.75 );

                const ground = new THREE.Mesh( groundGeo, groundMat );
                ground.position.y = - 33;
                ground.rotation.x = - Math.PI / 2;
                ground.receiveShadow = true;
                scene.add( ground );

我在 flamingo https://threejs.org/examples/?q=light#webgl_lights_hemisphere 中重用了 ThreeJS 示例提供的大部分代码

这也是一个 imgur 的链接，我只是放了一些图片来查看阴影 https://imgur.com/a/MGrc5cw

谢谢

【问题讨论】：

我认为问题不在于您的灯光代码，您能否添加其余代码，特别是接收阴影的表面？我认为正在发生的事情是你的角色从接收阴影的地板表面移出

标签： three.js shadow light directional-light

【解决方案1】：

如果您的阴影在有限的区域内工作，那么一定是您的角色正在超出阴影相机的截锥体。

要创建定向阴影，您需要创建一个正交相机并将其尺寸指定为 .left, .right, .top, .bottom，在这种情况下，您的相机在每个方向上都有 100 个。当您的角色超过这 200 个单位时，它就在阴影摄像机之外，并且不再接收到阴影。

你应该给光影添加一个CameraHelper，让你看到它的视锥体中的空间，如in the DirectionalLightShadow code sample所示

const helper = new THREE.CameraHelper( dirLight.shadow.camera );
scene.add( helper );

也许你可以让影子摄像机跟随角色，这样他就会一直在里面。

【讨论】：