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

天空着色器

一整套大气散射模型被封装成一个球体,太阳高度决定天色从深夜蓝到夕阳橙。 十二根柱子投下的影子方向,会随太阳方位一起变化。

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

太阳位置怎么给

Sky 只认一个方向向量 sunPosition。 示例用球坐标从高度角与方位角算出这个向量, 再把同一个方向交给平行光,天空与地面光照就不会矛盾。

高度角低于零度时天空进入夜间,画面会明显变暗。 示例把半球光的颜色随高度角调整,避免太阳落山后地面全黑。

uniform取值作用
turbidity1 – 20大气浑浊度,越大越灰
rayleigh0.2 – 4瑞利散射,影响蓝天浓度
mieCoefficient0.005气溶胶散射强度
mieDirectionalG0.78太阳周围光晕的集中度

曝光要跟着调

天空本身是高动态范围的内容,默认曝光下会偏白。 示例把 toneMappingExposure 压到 0.5, 既保留太阳附近的细节,也让地面不至于过曝。

换成夜景时,这个值需要再降一到两档, 而太阳高度调回白天后又要提回来。这类场景更稳妥的做法是让曝光跟随太阳高度。

天空球要足够大。Sky 通常缩放几千倍并放在相机附近, 才能填满视锥且不被地面裁掉。缩放太小会出现天空边缘的硬切边。