时间戳

首页 > 解决方案 > three.js 阴影效果与 Unity 3D 中的不一样

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

问题描述

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

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

这是我的代码。

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

谢谢！！ 在此处输入图像描述

标签： javascriptunity3dmodelthree.js3d

解决方案

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

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

Unity 使用级联阴影贴图，而three.js 对整个场景使用单个阴影贴图，这会导致质量上的主要差距。链接到统一文档。 关于阴影贴图的好 msdn 文档。

如果您的场景是静态的，请考虑使用光照贴图。这也会给你更好的表现。

推荐阅读