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

阴影相机

平行光的阴影由一台正交相机生成,它的视锥就是阴影贴图能覆盖的范围。 把视锥画出来,能看到超出范围的建筑根本没有影子,也能算出每单位占多少像素。

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

阴影也有边界

light.shadow.camera 默认是一个很小的正交视锥, 左右上下各 5 个单位。场景一大,只有中间一小块有影子, 外面的建筑看起来像悬空。

示例的滑杆直接改这个视锥的四个边界,再调用 updateProjectionMatrix(),辅助线同步更新。 范围调大后影子覆盖更全,但每单位分到的像素变少,边缘开始出现锯齿。

范围覆盖尺寸每单位像素
612 × 12170.7
1836 × 3656.9
4080 × 8025.6

贴图分辨率与范围的乘积

阴影质量可用「每单位像素」衡量:贴图边长除以视锥宽度。 这个值低于二十左右,细柱子的影子就会断断续续。 提高贴图到 4096 能把质量翻倍,代价是显存与带宽也翻倍。

更常见的做法是把阴影相机收紧到真正需要的区域, 比如跟随相机移动的玩家周围,而不是覆盖整张地图。

辅助线不属于光照计算。CameraHelper 只在调试时加进场景, 它自身也消耗绘制调用。正式发布前应该把它移除, 或者放在一个开关里默认关闭。