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

泛光

十六个自发光几何体围成一圈,亮度超过阈值的部分向外扩散。 强度、半径、阈值三个滑杆分别控制光晕的浓度、范围与触发门槛。

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

阈值决定谁能发光

threshold 是亮度下限,低于它的像素完全不参与泛光。 示例的自发光强度设到 3.2,配合 0.55 的阈值,只有几何体本身发光, 地面与背景保持干净。

阈值调低到 0 时,整片画面都会参与模糊,得到雾蒙蒙的效果; 调高到接近 1 则只剩最亮的中心点。夜景类场景通常在 0.4 到 0.7 之间。

参数默认观感
strength1.1光晕浓度,0 即完全关闭
radius0.5扩散范围,超过 0.8 会盖住细节
threshold0.55参与发光的亮度门槛
自发光强度3.2决定像素是否越过门槛

为什么最后还要 OutputPass

合成器里的中间纹理是线性空间、高动态范围的。 OutputPass 负责做色调映射与 sRGB 编码, 少了它画面会偏暗偏灰,泛光也会集中在极少数像素上。

泛光会吃掉小字。半径超过 0.7 时,密集的标注文字会被光晕糊在一起。 需要同时保留文字可读性的界面,应该只在三维图层上做泛光, 文字放在 DOM 层,或者把泛光半径压到 0.3 以下。