Three.js 阴影——如何改进？

【问题标题】：Three.js shadows - how to improve?Three.js 阴影——如何改进？
【发布时间】：2013-10-04 06:45:18
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： javascript three.js webgl

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

【讨论】：

此答案来自 2013 年，因此可能基于 r55 - r64。你知道如何在 r87 中柔化阴影吗？