在正常情况下，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/
最佳答案
阴影是在光源位置使用“摄像机”模拟的，摄像机的视锥（或视场）和分辨率决定了阴影与对象的匹配程度。您不可能拥有覆盖大面积区域的非常详细的阴影，因此您需要将阴影摄像机调整到场景中重要的部分。在这种情况下，更改参数以扩展相机的视锥范围时，会将其分布在更大的区域上，并且精度下降。
要提高结果，您可以：
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。
关于javascript - 为什么在Three.js中阴影变得模糊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48134282/