为什么在Three.js中阴影会变模糊

Question

在正常情况下，阴影看起来像这样：

但是在我修改了 directionLight.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/

- Jesse Luo

---

将相机控制器添加到场景中，以便您可以看到自己在做什么。https://jsfiddle.net/z1m6uffu/14/。更新至当前版本的three.js。 - WestLangley

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文档。

- Don McCurdy

---

OP已经增加了阴影相机的视锥体大小。 - WestLangley

谢谢，已经使用更好的术语更新了答案。 :) - Don McCurdy