three.js阴影效果与Unity 3D中的效果不同

Question

我使用three.js将.fbx 3D模型导入场景中，发现阴影效果与使用Unity有所不同。所有阴影都太模糊了。

如何在three.js中将shadowMap设置为与Unity中的相同？

这是我的代码。

light = scene.getObjectByName("DirectionalLight");
light.castShadow = true;
light.shadowMap.type = THREE.PCFSoftShadowMap;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

谢谢！！

Answer 1

您的伪影是由阴影贴图精度不足引起的。 如果您通过设置light.shadowMap.type = THREE.BasicShadowMap来禁用PCF，将会清楚地看到（并且它也应该禁用模糊）。 减小PCF内核大小将减少模糊性，但是似乎在three.js中没有旋钮可以对其进行调整。

如果增加阴影贴图的分辨率（例如，提高到2048），结果会稍微好一些。 但这对于这么大的场景还不够好。

Unity使用cascaded shadow maps，three.js使用单个阴影贴图表示整个场景，会导致质量上的主要差距。 Link to unity docs。 Good msdn docs about shadow maps。

如果场景是静态的，请考虑使用光照贴图。这也将为您带来更好的性能。