Three.js阴影 - 如何改善？

Question

我一直在玩tri.js - 2toria.com/pool

我遇到的问题是试图让我的阴影看起来更好。目前，他们看起来像这样： -

有点像素化。有没有办法让它们看起来更流畅，就像这里： -

我尝试了一些东西，但找不到合适的设置。我的渲染器设置如下： -

renderer.shadowMapEnabled = true;   
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFShadowMap;

我认为shadowMapSoft可以做到，但没有。任何想法/帮助？

Answer 1

确实，我遇到了同样的问题。我的修复是增加我的光源shadowMapWidth和Height。在我的情况下，这是一个spotLight：

spotLight = new THREE.SpotLight( 0xAAAAAA );
spotLight.castShadow = true;
spotLight.shadowCameraFov = VIEW_ANGLE;
spotLight.shadowBias = 0.0001;
spotLight.shadowDarkness = 0.2;
spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;

哦，还有一件事，如果你用2的幂增加地图大小，你会越来越平滑阴影，但是你会看到复杂几何体的性能影响。所以尝试2048，也许4096看看它们是如何为你工作的。

我注意到你有renderer.shadowMapType。我将不得不调查一下，可能会让我自己的项目更好，谢谢：）