如何在three.js中提高阴影质量答案

【问题标题】：How to improve shadow quality in three.js如何在three.js中提高阴影质量
【发布时间】：2018-08-26 04:48:33
【问题描述】：

我在一个场景中有几个对象。我希望它们在一个宽平面上移动，它会接收到阴影。如果我只使用一个点光源或一个非常大的定向光源，当物体移动到角落时，它的阴影会变得非常粗糙（粗糙的阴影边缘）。像这样：

所以我想知道是否应该为它们上方的每个对象使用灯光并跟随它们以投射出高质量的阴影边缘？在某些情况下，我无法将 shadow.mapsize 设置得更高。

【问题讨论】：

【解决方案1】：

控制阴影质量的因素有很多。

在我看来，您的阴影相机左/右/上/下设置太大，并且它在太大的区域上投射阴影。

阴影投射灯非常昂贵，所以我会避免尝试通过使用多个灯来进行补偿。

尝试减少 light.shadow.camera left/right/top/bottom 以更好地将地图聚焦在对象所在的位置。还尝试将阴影贴图大小增加到 1024 或 2048 平方。

另一件有帮助的事情是使用 THREE.PCFShadowmapping 而不是默认值。这将使阴影的边缘变得平滑。

编辑：还可以查看 PCFSoftShadowMapping.. 渲染速度较慢，但可以大大平滑阴影边缘。

正确的阴影映射是一个棘手的过程，需要大量的摆弄。

另外，尝试将 DirectionalLightHelper 连接到您的灯光，并将 CameraHelper 连接到灯光相机。这些将帮助您确定阴影投射区域有多大以及物体指向的位置。

【讨论】：

是的，你在codepen.codepen.io/iamnotstone/pen/jzrzge中提到的所有方法我都试过了。那么，对我来说最好的解决方案是设置一个窄的 directionalShadow 来跟随我的主摄像头？
我稍微修正了你的样本。我将 shadowMapSize 增加到 1024（您也只设置了 shadowMapSize 的宽度……我现在都设置了）我切换到 PCFSoftShadowMapping……并添加了一些动画以更好地显示效果。 codepen.io/anon/pen/oqZWQw
是的......这是一种常见的技术，让方向灯跟随相机或焦点对象......就像赛车游戏中的汽车或主角...... . 您可能会遇到的一个问题是移动定向相机会导致阴影边缘闪烁。您可以通过仅移动定向光来避免这种影响，当它远离目标对象某个阈值时。我在我正在开发的赛车游戏中这样做，效果很好。
谢谢。关键是要弄清楚何时何地设置灯光。非常感谢您为我提供如此多的帮助。
编辑：我更新了 CODEPEN，所以它适用于最新的 3JS：codepen.io/manthrax/pen/BadMMmK