为什么影子在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。