11. Three.js 中的 AmbientLight（环境光）详解

本文适用于 Three.js 初学者与进阶开发者，深入了解 THREE.AmbientLight 的用法、原理和最佳实践，最后还会给出一个基于 Vue 3 Composition API 的真实代码案例。

---

什么是 AmbientLight（环境光）？

THREE.AmbientLight 是一种全局光源，它会均匀地照亮整个场景中的所有物体，没有方向性、不会产生阴影，是最基础也最常用的光源之一。

✅ 特点：

• 没有位置（无方向性）

• 不会产生阴影

• 整体照亮所有物体（不会突出立体感）

• 通常与其他光源（如 DirectionalLight、PointLight）配合使用

---

创建语法

const light = new THREE.AmbientLight(color, intensity); 
scene.add(light);

---

⚙️ 参数说明

参数	类型	说明
color	Color / Number / String	光的颜色，默认 0xffffff
intensity	Number	光照强度，默认 1，可设置为任意正数，0 为无光照

示例：

const ambient = new THREE.AmbientLight(0x404040); // 柔和白光 
scene.add(ambient);

---

使用技巧与建议

• 通常用来“提亮整体场景”

• 不建议单独使用（会导致模型显得“平面”）

• 常与 DirectionalLight 或 PointLight 搭配，提供基础光照

配合使用建议：

const ambient = new THREE.AmbientLight(0x404040, 1.5); 
const directional = new THREE.DirectionalLight(0xffffff, 0.8); 
scene.add(ambient, directional);

---

❗ 与其他光源的区别

光源类型	是否投影	是否有方向	用途
AmbientLight	❌	❌	提供基础全局照明
DirectionalLight	✅	✅	类似太阳光，有阴影
PointLight	✅	✅ (点发散)	类似灯泡，有范围和衰减
SpotLight	✅	✅ (锥形)	舞台聚光灯，照射区域可控

---

效果对比图

你可以使用以下代码观察效果差异：

// 仅环境光 
scene.add(new THREE.AmbientLight(0xffffff, 1.2)); 
// 无光 
// scene 不添加任何光源

---

Vue 3 + Composition API 使用示例

我们用 Vue 3 + Three.js 搭建一个简单的场景，加入 AmbientLight。

依赖准备（假设使用 Vite 构建）

npm install three

示例代码：AmbientLightScene.vue

---

总结

• THREE.AmbientLight 是基础却不可或缺的光源

• 提供全局均匀照明，但不支持阴影

• 通常作为辅助光源，与其他光源结合使用效果更佳

• 在 Vue 3 项目中非常易用，可组合其它光源构建真实感场景

---

后续推荐阅读（系列文章）

• 【已发布】Three.js Light 光源总览

• 【本篇】AmbientLight 环境光详解（你正在阅读）

• 【即将上线】DirectionalLight 平行光详解

• 【即将上线】PointLight 点光源详解

• 【即将上线】SpotLight 聚光灯详解

• ...

欢迎收藏 + 关注，第一时间获取系列更新！