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

聚光灯

一盏灯从高处照向地形,锥角决定光斑大小,半影决定边缘软硬。 灯头会缓慢绕圈,光斑跟着在坡面上滑动,阴影也随之变形。

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

angle 是半锥角

angle 的单位是弧度,指光锥边缘与中心轴的夹角, 因此整个光锥的张开角是它的两倍。滑杆给的是度数,传入前用 degToRad 换算。

penumbra 取值范围 0 到 1,表示边缘衰减区占整个锥面的比例。 0 是完全硬边,光斑边界像刀切;1 时从中心就开始衰减,几乎没有边界。 舞台效果常用 0.3 到 0.5。

参数取值作用
angle6° – 55°光斑张角
penumbra0 – 1边缘柔和度
decay1.6略缓于平方反比
distance60超出即不再照亮

目标点必须是场景里的对象

聚光灯靠 spot.target 确定朝向。这个目标本身也是一个 Object3D,必须加进场景,否则它的世界矩阵不会更新, 灯会一直朝着默认的原点照。

示例每帧改目标的坐标再调用 updateMatrixWorld(), 灯头就跟着摆动。这比旋转灯体本身更直观:位置不动,只改「看向哪里」。

阴影贴图会随锥角变模糊。锥角越大,同样的贴图分辨率要覆盖更大范围, 边缘锯齿越明显。调大角度时记得同步提高 shadow.mapSize,或者接受更软的阴影。