ThreeJS中的阴影距离问题
Shadows Distance problems in ThreeJS
我目前正在为我的场景使用定向光。一个小角色可以四处移动。所有阴影都有效。但是,如果我开始对化身走得更远一点,阴影就不再起作用了。我认为它可能来自光线的角度,但我无法改变它。我可以在 shadow/non-shadow 区域周围画一个正方形。
这是我的代码。大量的人在这里让我测试东西
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 );
我用火烈鸟重用了 ThreeJS 示例提供的大部分代码 https://threejs.org/examples/?q=light#webgl_lights_hemisphere
这里还有一个 link 的 imgur,我只是放了一些图片来查看阴影
https://imgur.com/a/MGrc5cw
谢谢
如果您的阴影在有限区域内工作,那么一定是您的角色超出了阴影摄像机的截锥体。
要创建定向阴影,您可以创建一个正交相机并使用 .left, .right, .top, .bottom
分配其尺寸,在这种情况下,您的相机在每个方向上都有 100 个。当你的角色走出这 200 个单位时,它就在阴影摄像机之外,并且不再接收到阴影。
您应该在光影中添加一个 CameraHelper
以让您在其视锥体中看到 space,如所见 in the DirectionalLightShadow code sample
const helper = new THREE.CameraHelper( dirLight.shadow.camera );
scene.add( helper );
也许你可以让影子摄像机跟随角色,这样他就会一直在里面。
我目前正在为我的场景使用定向光。一个小角色可以四处移动。所有阴影都有效。但是,如果我开始对化身走得更远一点,阴影就不再起作用了。我认为它可能来自光线的角度,但我无法改变它。我可以在 shadow/non-shadow 区域周围画一个正方形。
这是我的代码。大量的人在这里让我测试东西
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 );
我用火烈鸟重用了 ThreeJS 示例提供的大部分代码 https://threejs.org/examples/?q=light#webgl_lights_hemisphere
这里还有一个 link 的 imgur,我只是放了一些图片来查看阴影 https://imgur.com/a/MGrc5cw
谢谢
如果您的阴影在有限区域内工作,那么一定是您的角色超出了阴影摄像机的截锥体。
要创建定向阴影,您可以创建一个正交相机并使用 .left, .right, .top, .bottom
分配其尺寸,在这种情况下,您的相机在每个方向上都有 100 个。当你的角色走出这 200 个单位时,它就在阴影摄像机之外,并且不再接收到阴影。
您应该在光影中添加一个 CameraHelper
以让您在其视锥体中看到 space,如所见 in the DirectionalLightShadow code sample
const helper = new THREE.CameraHelper( dirLight.shadow.camera );
scene.add( helper );
也许你可以让影子摄像机跟随角色,这样他就会一直在里面。