与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

这是因为DirectionLight在three.js中创建的方式（之前我有question）。用于方向灯的three.js中使用的方法与任何其他阴影创建大致相同：它创建阴影贴图。使用定向光源，使用正交相机创建此阴影贴图。因此，想想你的光与OrthogonalCamera一样，并思考那些如何观看场景。灯光从方向光的角度观察场景，并基于该视图创建阴影贴图。该视图当然具有与您的相机不同的投影矩阵。因此，主摄像机投影必须将阴影转换为在其视图中出现。这会导致阴影看起来像您的图像。实际上，阴影的像素化揭示了阴影相机的定向方式及其规模。

使用标准灯光在three.js中无法创建真正的正交阴影。从相机的角度来看，也无法实现阴影贴图的理想覆盖。

Answer 2

问题是您的光源对于您要遮挡的对象来说太大了。您可以通过设置

来显示阴影相机

light.shadowCameraVisible = true

然后尝试通过改变<{1}}下面的参数

来减小光源的大小

d