首页 / three.js / 使用示例
点光源阴影
八根柱子围成一圈,中央一座方台,点光源悬在外侧缓慢绕行。 影子从每根柱子的根部向外放射,方向随光源位置连续变化。
源码与运行效果
六次渲染的代价
平行光只需要一张贴图,点光源要朝前后左右上下各渲一次, 合成一张立方体贴图。也就是说,每盏投影点光源会让场景多渲染六遍, 这还是不算主视图的情况下。
示例把贴图降到 512,并把影响距离限制在六十以内, 场景里只有一栋建筑要投影,帧率仍然稳定。 若场景里有十盏投影点光源,桌面端也会开始吃力。
| 项 | 取值 | 说明 |
|---|---|---|
| 贴图 | 6 × 512² | 立方体六面 |
near | 0.5 | 太大会丢失灯附近的影子 |
far | 60 | 与光源影响距离一致 |
| 阴影数量 | 1 盏 | 仅点光源投影 |
为什么阴影会拉伸
立方体贴图六个面的分辨率固定,离灯越远,单个像素覆盖的实际面积越大。 柱子离灯近时影子边缘清晰,绕到远侧后开始糊。 这是分辨率的固有限制,不是参数写错了。
能不用点光源投影就不用。路灯、车灯这类大量点光源, 通常只让其中最近的一两盏投影,其余只发光不投影。 视觉上几乎看不出差别,开销却降一个量级。