与three.js奇怪的影子

Question

对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;

有任何想法吗？

Answer 1

这是由在three.js中创建DirectionLight的方式导致的（我之前有这个问题 ）。 three.js中用于方向灯的方法与其他任何阴影创建方法大致相同：它创建阴影图。 使用定向光，可以使用正交相机创建此阴影贴图。 因此，请考虑将您的光源与“正交摄影机”（OrthogonalCamera）视为相同，并考虑这些光源如何查看场景。 光线从定向光线的角度观看场景，并基于该视图创建阴影贴图。 当然，该视图的投影矩阵与您的相机不同。 因此，主摄像机投影必须转换阴影以使其出现在视图中。 这会导致阴影看起来像图像显示的那样。 确实，阴影的像素化揭示了阴影相机的方向及其缩放比例。

three.js中无法使用标准光源创建真正的正交阴影。 也无法从相机的角度获得理想的阴影图覆盖范围。

Answer 2

问题是您的光源对于要遮挡的对象太大。 您可以通过设置可视化阴影摄像机

light.shadowCameraVisible = true

然后尝试通过更改以下参数d减小光源的尺寸

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