ThreeJS - 点光影像聚光灯

Question

我有一个带有环境光和点光源的场景，我想在网格下方有阴影，如图中所示，但中心部分周围有一个阴影区域。

看起来点光源投射阴影就好像它是聚光灯一样。 如果我减少light.position.z灰色区域消失但阴影的位置发生变化（它们不再位于网格下）。

我用代码创建了一个小提琴：https://jsfiddle.net/ytmc6kxm/1/

如何在不缩短距离的情况下摆脱圆圈周围的灰色区域？ 我可以用定向灯吗？ 为什么我看不到定向光的阴影？

谢谢！

Answer 1

方向阴影使用正交投影，需要适当的窗口。从-5到5的默认窗口不会覆盖整个场景。添加

light.shadow.camera.left = -300
light.shadow.camera.top = -300
light.shadow.camera.right = 300
light.shadow.camera.bottom = 300

使用定向光时会出现阴影。

至于为什么点阴影被剪裁，它似乎是一个与this line in shadowmap_pars_fragment.glsl相关的three.js中的错误：

    // dp = distance from light to fragment position
    float dp = ( length( lightToPosition ) - shadowBias ) / 1000.0;

缩放参数将所有内容置于与点光源相距超过1000个单位的阴影中。其他阴影类型直接使用阴影空间中的投影坐标获得深度，因此它们不会出现此溢出问题。将SpotLight替换为PointLight＆＃34;修复＆＃34;问题。为什么点光源是这样实现的？不知道。正确的方法是将问题发布给three.js伙伴。