为什么在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可以看到阴影覆盖的位置，如本例所示 。

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

有关更多信息，请参见THREE.LightShadow文档 。