经纬志
首页 / three.js / 使用示例

点光源阴影

八根柱子围成一圈,中央一座方台,点光源悬在外侧缓慢绕行。 影子从每根柱子的根部向外放射,方向随光源位置连续变化。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

六次渲染的代价

平行光只需要一张贴图,点光源要朝前后左右上下各渲一次, 合成一张立方体贴图。也就是说,每盏投影点光源会让场景多渲染六遍, 这还是不算主视图的情况下。

示例把贴图降到 512,并把影响距离限制在六十以内, 场景里只有一栋建筑要投影,帧率仍然稳定。 若场景里有十盏投影点光源,桌面端也会开始吃力。

项取值说明
贴图6 × 512²立方体六面
near0.5太大会丢失灯附近的影子
far60与光源影响距离一致
阴影数量1 盏仅点光源投影

为什么阴影会拉伸

立方体贴图六个面的分辨率固定,离灯越远,单个像素覆盖的实际面积越大。 柱子离灯近时影子边缘清晰,绕到远侧后开始糊。 这是分辨率的固有限制,不是参数写错了。

能不用点光源投影就不用。路灯、车灯这类大量点光源, 通常只让其中最近的一两盏投影,其余只发光不投影。 视觉上几乎看不出差别,开销却降一个量级。