javascript - 为什么阴影在 Three.js 中变得模糊

Question

正常情况下，shaow是这样的

但是我修改了directionalLight.shadow.camera的参数之后

directionalLight.shadow.camera.left = -50
directionalLight.shadow.camera.right = 50
directionalLight.shadow.camera.top = -50
directionalLight.shadow.camera.bottom = 50

变成了这样

如何解决这个问题？

https://jsfiddle.net/JesseLuo/z1m6uffu/12/

Answer 1

阴影是在光源位置使用“相机”模拟的，该相机的平截头锥体(或其视场)和分辨率决定了阴影与您的对象匹配的精确程度。您不可能拥有覆盖大面积区域的完美细节阴影，因此您需要将阴影摄像机调整到场景中重要的部分。在这种情况下，当您更改参数以扩展相机的截锥体时，您将其扩展到更大的区域并失去了精度。

要改善结果，您可以:

A. 增加 shadowMap 的分辨率。更高的值以计算时间为代价提供更好质量的阴影。值必须是 2 的幂。

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024; 

B. 改变阴影类型。 PCFSoft 可能看起来更好，但性能不佳。

renderer.shadowMap.type = THREE.PCFSoftShadowMap;

C. 将阴影相机平截头体的尺寸减小到您需要覆盖的区域。使用 CameraHelper 查看阴影覆盖的位置，如 this example .

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

参见 THREE.LightShadow docs获取更多信息。