篇章 2：Three.js 魔法灯光学院 ✨ — 点亮你的村庄我们就要去魔法灯光学院🪄，学习如何点亮你的村庄：让太阳升

🎬 开场白

还记得上一章你搭的那个小绿房子吗？🏠
它会转来转去，像在跳广场舞💃，但是整个村庄黑漆漆的，就像停电了还在嗨。
等等！问题来了——既然没点灯，为什么你还能看见房子？🤔
答案是：
因为上一章我们偷了点“小作弊”😏 —— 用的是 自带夜光漆的材质 (MeshBasicMaterial)。
这种材质就像在房子外墙刷了荧光粉，不管有没有光，永远绿得发亮。

不过嘛，这种“夜光漆房子”只能用来练手，没法打造真正有质感的村庄。
真正的 3D 世界可是讲究光影的！✨
没有太阳☀️、月亮🌙、火把🔥，村子看起来就平平无奇，没层次、没氛围。

所以这章，我们就要去 魔法灯光学院🪄，学习如何点亮你的村庄：
让太阳升起、让火把照明、甚至还能用聚光灯把你的小房子变成舞台 C 位！🎤

准备好了吗？你的村庄马上要从“夜光玩具”进化为“光影大片”！🎬

🪄 灯光的四大派系

Three.js 光源	村庄比喻	幽默描述
AmbientLight（环境光）	月光	“不管你在哪，月光都洒满大地，给你点亮一个大概。”
DirectionalLight（平行光）	太阳光	“像太阳一样，从一个方向照下来，村民终于能看见影子。”
PointLight（点光源）	火把/路灯	“放在谁身边，谁就最亮，照亮一小圈。”
SpotLight（聚光灯）	舞台射灯	“指定主角！光柱打到谁，谁就是今晚的C位。”

🏠 新房子：换掉夜光漆，准备接受光照

const geometry = new THREE.BoxGeometry(); 
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // 标准材质，需要光才能发亮
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

现在房子不再自带发光了，如果你没加光……那它会黑到消失不见😂。

所以我们就来逐一体验光源的魔法！

1️⃣ AmbientLight —— 环境光（月光）

环境光就像“月光 🌙”，不管你在哪，都给你一点亮度。

但它没方向感，所以照不出影子，只能让大家“看得见东西”。

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); 
scene.add(ambientLight);

光源类型	代码示例	幽默比喻	参数说明	💡 效果
AmbientLight（环境光）	`const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);`	全村通用月光灯🌙	颜色 `0xffffff` → 月光白，强度 `0.5` → 朦胧月光	房子从黑漆漆 → 轮廓可见，但没有阴影，像漫画夜景

2️⃣ DirectionalLight —— 平行光（太阳光）

平行光就像太阳 ☀️，从一个方向“无差别”地照射整个村庄。

它能制造出真实的明暗对比（甚至能加影子）。

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7.5); 
scene.add(directionalLight);

光源类型	代码示例	幽默比喻	参数说明	💡 效果
DirectionalLight（平行光）	`const directionalLight = new THREE.DirectionalLight(0xffffff, 1)`	村庄大太阳☀️	- `0xffffff` → 纯白光，就像正午阳光 - 强度 `1` → 光线亮度，0.5 是阴天，2 就像晒到眼睛都睁不开 - `.position.set(5, 10, 7.5)` → 光从哪里照过来，高度和角度决定影子方向和长度 - `scene.add(directionalLight)` → 把太阳挂到天空里，让整个村庄沐浴阳光 - 阴影可开启 `.castShadow = true` → 村民影子立刻出现	光线有方向，有阴影，房子和地面立体感增强，村民终于能看到影子，光影效果逼真，像白天一样亮堂

💡 效果：

房子有了“阳光”的明暗变化，看起来更立体！

3️⃣ PointLight —— 点光源（火把/路灯）

点光源就像火把 🔥，光从一点向四周散开。

靠近它就亮，远离就暗，很有氛围。

const pointLight = new THREE.PointLight(0xffaa00, 1, 100); 
pointLight.position.set(2, 3, 2); 
scene.add(pointLight);

光源类型	代码示例	幽默比喻	参数说明	💡 效果
PointLight（点光源）	`const pointLight = new THREE.PointLight(0xffaa00, 1, 50);`	火把/路灯🔥	颜色暖黄，强度 1，衰减距离 50	放在谁身边，谁就最亮，小圈范围内照亮，像随身小夜灯

💡 效果：

房子被火把照得一块亮一块暗，像村民夜晚赶路时的路灯。

4️⃣ SpotLight —— 聚光灯（舞台射灯）

聚光灯就像舞台射灯 🎤，有一个明确的光柱，谁被照到谁就是 C 位！

const spotLight = new THREE.SpotLight(0xffffff, 5); // 强度调高，更亮
spotLight.position.set(4, 8, 5); // 提高位置，更显聚光效果
spotLight.angle = Math.PI / 6; // 光锥角度稍大，覆盖立方体
spotLight.penumbra = 0.3; // 边缘柔和
spotLight.decay = 2; // 衰减
spotLight.distance = 30; // 有效照射距离
spotLight.castShadow = true; // 投射阴影
spotLight.shadow.mapSize.width = 2048; // 提高阴影精度
spotLight.shadow.mapSize.height = 2048;
spotLight.target = rotatingCube; // 照向旋转立方体
scene.add(spotLight);
scene.add(spotLight.target);

光源类型	代码示例	幽默比喻	参数说明	💡 效果
SpotLight（聚光灯）	`const spotLight = new THREE.SpotLight(0xffffff, 5);`	舞台C位射灯🎯	颜色白色，强度 5，可设置角度和衰减	指定主角，光柱打到谁，谁就是今晚的C位，阴影集中突出人物

参数/代码	作用	幽默解读
`new THREE.SpotLight(0xffffff, 5)`	创建一个聚光灯，颜色白色，亮度调到5（默认是1，太暗了）	想象一下，你的舞台灯突然亮了5倍，你的小立方体瞬间成为“明星”
`position.set(4, 8, 5)`	设置灯的位置，x、y、z三个方向	就像把灯架在天花板上稍偏右，让光线正好打在立方体上，不然它可能“躲在角落里”
`angle = Math.PI / 6`	光锥的角度，光照范围	光锥像一个甜甜圈锥形冰激凌，角度大点才能把整个立方体裹进去
`penumbra = 0.3`	光边缘柔和程度	让光线不要像激光一样生硬，边缘有点“朦胧美”，立方体看起来更温柔
`decay = 2`	光衰减	光像人的爱一样，离远了就弱，2表示离得远衰减更快
`distance = 30`	光照有效距离	超过30个单位光线就懒得照了，它有“休息距离”
`castShadow = true`	开启阴影投射	立方体终于可以秀出它的阴影了！没阴影就像没体温的雕塑
`shadow.mapSize.width = 2048` `shadow.mapSize.height = 2048`	阴影贴图分辨率	阴影也要高分辨率，不然就像素化的糊糊面膜，看不清轮廓
`target = rotatingCube`	聚光灯照向旋转立方体	灯光有了“目标锁定”，立方体是今晚唯一的明星
`scene.add(spotLight)` `scene.add(spotLight.target)`	把灯和灯目标加入场景	灯光和目标一起入场，才能正常表演

💡 效果：

房子秒变舞台主角，全村焦点 ✨。

🌟 结尾

🎉 恭喜你！到这里，你已经基本掌握了 四大光源 的全部秘密：

环境光（AmbientLight）：隐形暖宝宝🌈，无处不在，轻轻托起阴影，保证黑暗角落也不孤单。
平行光（DirectionalLight）：大太阳☀️，整个场景都能沐浴阳光，村民影子清晰可见。
点光源（PointLight）：小灯泡💡，四面八方散发光芒，给场景加了点温暖和立体感。
聚光灯（SpotLight）：舞台主角灯🎯，专门照顾重点物体，光锥角度、柔和边缘调到位，光影效果拉满。

通过这一章，你不仅学会了光源的用法，还顺带练了 耐心、调试技能和幽默感。