javascript - Three.js 阴影 - 如何改进？

Question

我一直在这里玩 three.js - 2toria.com/pool

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

有点像素化。有没有办法让它们看起来更平滑，就像这里:-

我尝试了一些方法，但找不到正确的设置。我的渲染器是这样设置的:-

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

我以为 shadowMapSoft 会这样做，但没有。有什么想法/帮助吗？

Answer 1

确实，我遇到了同样的问题。我的解决方法是增加我的光源 shadowMapWidth 和 Height。在我的例子中，它是一个聚光灯:

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。我将不得不研究一下，可能会使我自己的项目变得更好，谢谢 :)