javascript - ThreeJS - 像聚光灯一样的点光阴影

Question

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

看起来点光源正在转换阴影，就好像它是聚光灯一样。如果我减少 light.position.z，灰色区域会消失，但阴影的位置会发生变化(它们不再位于网格下方)。

我用代码创建了一个 fiddle :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

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

至于点影为什么会被裁剪，好像是three.js的bug，与this line in shadowmap_pars_fragment.glsl相关:

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

缩放参数将距离点光源超过 1000 个单位的一切都置于阴影中。其他阴影类型直接使用阴影空间中的投影坐标获取深度，因此它们不存在溢出问题。用 SpotLight 代替 PointLight “修复”了这个问题。为什么点光源是这样实现的？不知道。正确的前进方式是向 three.js 人员发布问题。