Three.js-硬要自学系列30之专项学习环境光

什么是环境光

想象一下阴天在户外的感觉：

1. 整个天空像一个巨大的、均匀的发光体☁️
2. 光线从四面八方柔和地洒下来
3. 你站在任何地方，身上受光程度几乎一样，没有明显的影子

核心特点

特性	现实比喻	代码体现
无方向性	阴天时，光线不来自特定角度	无需设置光源位置
均匀照射	树顶、地面、你的脸亮度差不多	所有物体表面均匀受光
不产生影子	阴天下几乎没有清晰投影	无法用环境光生成阴影
效率高	就像开了基础照明灯，省电	计算简单，性能消耗低

实际应用场景

1. 基础打底光

   • 如同房间的主灯，先给场景铺一层基础亮度
   • 适合：避免物体完全陷入黑暗

2. 烘托氛围

   • 用蓝色环境光模拟夜晚，用暖黄光模拟黄昏
   • 适合：快速改变全局色调

3. 搭配其他光源（90%的情况！）

   • 环境光：填充阴影死角（如桌底、缝隙）
   • 方向光：产生明暗对比，塑造立体感

使用误区

"环境光不能替代太阳光！"
真相 ：它像画布的底色，而物体结构需要方向性光源（如 DirectionalLight）来刻画。
"环境光并非越强越真实！"
真相：强度过高会使场景像曝光过度的照片，丢失细节（通常强度 ≤0.3 更自然）。

基础使用案例

效果如图

const al = new THREE.AmbientLight('0xffffff', 1)
scene.add(al)

需要了解的API

AmbientLight 用于构建环境光

核心属性

1. .color

• 作用：动态修改光源颜色

• 特性：

  • 支持直接赋值（light.color = new THREE.Color(0x00FF00);）
  • 颜色变化实时生效（无需重新创建光源）

2. .intensity

• 作用：调整光照强度

3. .isAmbientLight (只读)

• 值 ：恒为 true，用于类型检查

关键方法

.dispose()

• 作用：释放光源占用的GPU资源
• 使用场景 ：动态删除光源时必须调用，避免内存泄漏

intensity光强度演示案例

效果如图

let f = 0;
const fm = 300; 
function animation() {
    const a1 = f / fm;  
    const a2 = 3 - Math.abs(0.5 - a1)*3 / 0.5; // 确保 a2 在 0 到 3 之间

    al.intensity = a2; // 动态修改强度
    f += 1;
    f %= fm;  // 确保 f 在 0 到 fm 之间循环
    renderer.render( scene, camera );
    requestAnimationFrame( animation );
}

结合方向光效果案例

效果如图

const al = new THREE.AmbientLight('0xffffff', 0.5)
scene.add(al)
const dl = new THREE.DirectionalLight('0xffffff', 4)
dl.position.set(2, 2, -1)
scene.add(dl)

结合点光源效果案例

效果如图

const pl = new THREE.PointLight('0xffffff', 12,100)
pl.position.set(1, 1.5, 1)
pl.add( new THREE.Mesh( new THREE.SphereGeometry(0.1, 32,32), new THREE.MeshBasicMaterial({color: '#fff'})) )
scene.add(pl)

图中的白色小球标记点光源位置，案例中的明暗切换，也是通过修改环境光强弱实现的，可参照上一个案例的代码

以上便是本篇的所有内容，环境光使用频率还是蛮高的，自己动手练一练，感受一下实际效果