奇怪的影子与three.js答案

【问题标题】：Odd looking shadow with three.js奇怪的影子与three.js
【发布时间】：2014-01-11 09:02:10
【问题描述】：

对于three.js 和webgl 非常陌生，我在定向光下得到了非常奇怪的阴影。

这是我的渲染器代码：

this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;
this.renderer.shadowCameraNear = 3;
this.renderer.shadowCameraFar = this.camera.far;
this.renderer.shadowCameraFov = 75;
this.renderer.shadowMapBias = 0.0039;
this.renderer.shadowMapDarkness = 0.5;
this.renderer.shadowMapWidth = 1024;
this.renderer.shadowMapHeight = 1024;

有什么想法吗？

【问题讨论】：

目前无法对此进行测试，但我认为它可能会发生，因为投射阴影的立方体非常小。我认为 (5,5,20) 或附近的某个地方。

标签： javascript three.js shadow

【解决方案1】：

这是由于 DirectionLight 在 three.js 中的创建方式造成的（我之前有过 question）。 three.js 中用于方向光的方法与任何其他阴影创建方法大致相同：它创建一个阴影贴图。使用定向光，此阴影贴图是使用正交相机创建的。因此，将您的灯光与 OrthogonalCamera 相同，并考虑它们是如何看待场景的。灯光从定向光的角度查看场景，并基于该视图创建阴影贴图。当然，此视图具有与您的相机不同的投影矩阵。因此，主摄像机投影必须将阴影转换为出现在其视图中。这会产生看起来像您的图像所示的阴影。事实上，阴影的像素化揭示了阴影相机的方向及其比例。

three.js 中无法使用标准灯光创建真正的正交阴影。从相机的角度获得阴影贴图的理想覆盖也是不可能的。

【讨论】：

【解决方案2】：

问题是你的光源对于你正在阴影的对象来说太大了。您可以通过设置来可视化阴影相机

light.shadowCameraVisible = true

然后尝试通过改变下面的参数d 来减小光源的尺寸

light.shadowCameraLeft = -d
light.shadowCameraRight = d
light.shadowCameraTop = d
light.shadowCameraBottom = -d

【讨论】：