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