three.js 阴影效果与 Unity 3D 中的不一样答案

【问题标题】：three.js shadow effect is not same as in Unity 3Dthree.js 阴影效果与 Unity 3D 中的不一样
【发布时间】：2019-09-17 17:47:44
【问题描述】：

我使用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;

谢谢！！

【问题讨论】：

检查项目设置中的质量设置。
您使用的是PCFSoftShadowMap 参数，这就是您获得柔和阴影的原因。尝试改用PCFShadowMap。伪影可能是深度缓冲区分辨率的问题。使用light.shadow.bias 值来寻找几何图形的最佳位置。还要确保阴影相机的体积不大于场景

标签： javascript unity3d model three.js 3d

【解决方案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.

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

【讨论】：