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

标签 javascript html three.js

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

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

我用代码创建了一个 fiddle :https://jsfiddle.net/ytmc6kxm/1/

如何在不减小距离的情况下去除圆圈周围的灰色区域? 我可以用定向灯做到这一点吗? 为什么我在定向光下看不到任何阴影?

wrong shadow

谢谢!

最佳答案

定向阴影使用正交投影,这需要适当的窗口。从 -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 人员发布问题。

关于javascript - ThreeJS - 像聚光灯一样的点光阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41840778/

相关文章:

javascript - jsoup html解析style=”display :none; dont show the link

html - 使 HTML 页面有效到什么程度值得呢?

jquery - 为什么我的 div 会损坏,为什么我的弹跳效果不起作用?

javascript - 用js制作一个 "display: none"到 "display: block",让所有div碰撞

three.js - 如何将另一个场景对象附加到我的动画导入的 Collada 网格?

three.js - 如何在 THREE.JS 中创建可调整大小的对象

javascript - 仅使用 javascript 制作文档对象副本的最简单方法是什么

javascript - HTML5 视频自定义附加搜索栏

javascript - 如何以稍微不规则的模式(例如在 for 循环中)使用 setInterval?

javascript - Three.js + OrbitControls - 未捕获的类型错误 : Cannot read property 'render' of undefined