在 Three.js 的 3D 奇幻世界里，光线是赋予场景灵魂的关键元素。想象一下，你精心搭建了一座华丽的虚拟城堡，但若没有光线，它就像被丢进了伸手不见五指的黑匣子，所有的细节、纹理都将被黑暗吞噬。而环境光，就是这个 3D 世界里最基础、最温暖的 “小太阳”，它不挑对象，不看 “颜值”，公平地照亮每一个角落，今天我们就来揭开它渲染原理的神秘面纱。
一、初识环境光：均匀普照的光之精灵
环境光就像是清晨洒在大地上的薄雾，均匀地包裹着整个场景。在现实世界中，环境光来自于大气对阳光的散射、墙壁之间的反射等多种因素，它没有特定的方向，也没有明确的光源位置。在 Three.js 的代码宇宙里，我们可以通过AmbientLight类来创建这个神奇的光之精灵：
// 创建一个环境光，颜色为浅灰色，强度为0.5
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.5);
// 将环境光添加到场景中
scene.add(ambientLight);
这里的颜色参数0xcccccc就像是给环境光调配的 “肤色”，用十六进制表示颜色，而强度参数0.5则控制着它发光的 “热情程度”，数值越大，光线越亮，范围是从0（完全黑暗）到1（最亮），当然也可以设置大于1的数值，不过那就像是给环境光打了 “兴奋剂”，会让场景亮到 “刺眼”。
二、环境光渲染的底层魔法：照亮每一个顶点
在 Three.js 渲染场景时，它的 “幕后英雄” WebGL 会默默执行一系列复杂的操作。WebGL 就像是一个超级勤奋的工匠，它拿到我们创建的 3D 模型，会将其拆解成无数个小三角形（专业术语叫三角面），而这些三角面的角点，就是我们所说的顶点。环境光的渲染原理，简单来说，就是给这些顶点 “涂” 上合适的颜色，让整个模型看起来是被均匀照亮的。
当我们把环境光添加到场景中后，Three.js 会遍历场景里所有的 3D 对象。对于每一个对象的每一个顶点，它会执行一个 “光线计算小剧场”：
- 首先，它会拿出我们设置的环境光颜色和强度。就好比拿出调配好的颜料和画笔。
- 然后，找到顶点本身的颜色（如果有的话），这就像是顶点原本的 “皮肤” 颜色。
- 接着，将环境光的颜色和强度与顶点颜色进行 “混合搅拌”。这个过程就像是把颜料和原本的底色混合在一起，得到一个新的颜色。混合的方式可以简单理解为乘法运算，即新颜色 = 环境光颜色 × 环境光强度 × 顶点颜色 。最终得到的这个新颜色，就是这个顶点在环境光照射下应该呈现的样子。
- 最后，WebGL 会根据这些顶点的新颜色，通过一些插值算法（可以想象成用 “渐变色魔法”），计算出三角面上其他位置的颜色，从而让整个 3D 对象看起来都被环境光照亮了。
举个例子，如果我们有一个红色的立方体顶点（颜色值假设为0xff0000），添加了强度为0.5的白色环境光（颜色值0xffffff），那么经过 “混合搅拌” 后，这个顶点的新颜色就是0xff0000 × 0.5 × 0xffffff = 0x7f0000 ，原本鲜艳的红色就会变得稍微暗淡一些，像是被柔和的光线抚摸过一样。
三、环境光与材质的奇妙化学反应
在 Three.js 的世界里，材质就像是 3D 对象的 “衣服”，不同的材质对环境光的 “态度” 也不一样。比如MeshBasicMaterial材质，它就像是一个 “倔强的小孩”，不管环境光怎么照射，它都保持自己原本的颜色，完全无视环境光的存在。而MeshLambertMaterial材质和MeshPhongMaterial材质则像是 “友好的社交达人”，会积极地与环境光互动。
// 创建一个使用MeshLambertMaterial材质的立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
MeshLambertMaterial材质会根据环境光的强度和颜色，让对象表面呈现出不同的明暗效果，模拟出一种漫反射的感觉，就像是粗糙的墙面反射光线一样。MeshPhongMaterial材质则更 “精致” 一些，它不仅会考虑环境光，还能模拟出高光效果，让对象看起来像是光滑的塑料或者金属，在环境光的照耀下闪闪发光。
四、实战演练：打造氛围感场景
现在，我们来动手实践一下，用环境光打造一个温馨的夜晚场景。假设我们要创建一个星空下的小木屋：
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建环境光，模拟夜晚微弱的星光
const ambientLight = new THREE.AmbientLight(0x222222, 0.3);
scene.add(ambientLight);
// 创建小木屋模型（这里简化示例，假设已经有相应的几何体和材质）
const houseGeometry = new THREE.BoxGeometry(2, 2, 2);
const houseMaterial = new THREE.MeshLambertMaterial({ color: 0x8b4513 });
const house = new THREE.Mesh(houseGeometry, houseMaterial);
scene.add(house);
// 设置相机位置
camera.position.z = 5;
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
在这个例子中，我们创建了一个强度较低、颜色偏暗的环境光，模拟夜晚的星光，让小木屋沉浸在静谧的氛围中。你还可以通过调整环境光的颜色和强度，搭配不同的材质，创造出清晨、黄昏等各种不同时间段的氛围感场景。
五、进阶技巧：混合多种光源
虽然环境光很强大，但有时候单靠它还不够，我们需要混合多种光源来打造更逼真、更丰富的场景。比如，我们可以在刚才的小木屋场景中，再添加一个点光源，模拟小木屋窗户里透出的温暖灯光：
// 创建点光源，模拟窗户里的灯光
const pointLight = new THREE.PointLight(0xffff00, 1);
pointLight.position.set(1, 1.5, 1);
scene.add(pointLight);
这样，环境光负责提供整体的氛围，点光源则突出小木屋窗户处的细节，两者相互配合，让场景更加生动立体。
在 Three.js 的 3D 渲染世界里，环境光就像是一位默默付出的幕后功臣，用它均匀的光线为整个场景奠定基础氛围。通过理解它的渲染原理，搭配不同的材质和其他光源，我们就能创造出千变万化、栩栩如生的 3D 场景。快去发挥你的创意，让你的 3D 世界亮起来吧！
上述内容从多方面讲解了 Three.js 环境光渲染原理。你若觉得某些部分需补充，或想更换示例，欢迎随时和我说。
