🏡 欢迎来到新手村
欢迎来到“Three.js 新手村”，这是一个没有交通规则、随时可能掉进3D立方体坑的小村庄。你就是那个刚搬来的小村民，手里拿着神秘的魔法棒（也就是键盘）。
Three.js 就像你的魔法工具箱，能帮你把平面世界变成炫酷的3D世界。今天，我们先学会基础魔法——Hello World！
📚 概念小课堂
| Three.js 概念 | 村庄比喻 | 幽默描述 |
|---|---|---|
| Scene（场景） | 村庄广场 | "这是你的小天地，想放啥就放啥，连奇怪的东西也能堆起来。" |
| Camera（相机） | 村民的眼睛 | "相机帮你观察村庄里的每一个角落，别让它晕头转向哦。" |
| Renderer（渲染器） | 魔法投影机 | "它把你的小世界投影到屏幕上，就像在看一场魔法电影。" |
| Mesh（网格） | 村民和装备 | "每个村民都有自己的形状和衣服（材质），想让他们炫酷就换套装备。" |
| Geometry（几何体） | 村民的骨架 | "这决定了村民的基本形状，高矮胖瘦都靠它定型。" |
| Material（材质） | 衣服和颜料 | "给村民穿上漂亮衣服，换换颜色和质感，瞬间变时尚达人。" |
| Light（光源） | 太阳、路灯 | "光线决定了村子里的气氛，白天黑夜全靠它调节。" |
| Animation（动画） | 村民的动作 | "让村民跑起来、跳起来，甚至挥舞魔法棒，场景瞬间活了。" |
| Texture（纹理） | 衣服花纹和墙面贴纸 | "给村民和房子加点花纹，别让他们光秃秃的，太单调了。" |
| Camera Controls（相机控制） | 村民的视角操控器 | "你可以让相机飞来飞去，俯视、跟随或旋转，村子里没人能逃过你的视线。" |
💻 Hello World 代码示例
// 🏡 Step 1: 搭建你的小村庄
const scene = new THREE.Scene(); // 这是你的3D小天地，可以随便堆积奇怪的东西
// 👀 Step 2: 装上你的村民眼睛
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5; // 保证你不会撞到村口的房子
// 🪄 Step 3: 魔法投影机开机
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // 把村子投到你的屏幕上
// 🏠 Step 4: 建个小房子给村民住
const geometry = new THREE.BoxGeometry(); // 小立方体，基础房屋
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 给房子刷上绿色油漆
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); // 把房子放进村子里
// 🎢 Step 5: 开始魔法循环，让村子动起来
function animate() {
requestAnimationFrame(animate); // 这个魔法永不停歇
cube.rotation.x += 0.01; // 房子缓缓自转，像在跳舞
cube.rotation.y += 0.01;
renderer.render(scene, camera); // 把变化展现在你的眼睛里
}
animate(); // 启动魔法循环，祝你在村子里玩得开心！
🌟 Three.js 小村庄概念解释
| 概念 | 代码示例 | 新手易混点 | 幽默说明 / 比喻 |
|---|---|---|---|
| Scene | const scene = new THREE.Scene(); | 很多人不懂 Scene 是干嘛的 | 🏡 小村庄：你的 3D 世界，墙、树、房子、怪物都能放进去 |
| PerspectiveCamera | const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | FOV、宽高比、近远裁剪面参数 | 👀 村民眼睛：帮你看村子里的所有东西，75 是视角，0.1-1000 是可视范围 |
| Camera Position | camera.position.z = 5; | 新手不懂 z 轴位置 | 📏 拉开距离：站在村口，不然房子会挡住视线 |
| WebGLRenderer | const renderer = new THREE.WebGLRenderer(); | renderer 和 canvas 的关系 | 🪄 魔法投影机：把村子投射到屏幕上 |
| Renderer Size | renderer.setSize(window.innerWidth, window.innerHeight); | 大小与浏览器窗口关系 | 🖥️ 适配屏幕：投影机尺寸要和屏幕一样，画面不变形 |
| Append Renderer | document.body.appendChild(renderer.domElement); | DOM 放置位置 | 📌 安放投影机：把 canvas 放到页面里才能看到村子 |
| BoxGeometry | const geometry = new THREE.BoxGeometry(); | Geometry 概念 | 🏠 房子的骨架：定义形状和大小 |
| MeshBasicMaterial | const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); | Material 和 Geometry 关系 | 🎨 刷油漆：给房子加颜色或材质 |
| Mesh | const cube = new THREE.Mesh(geometry, material); | Mesh 是干嘛 | 👷 居民房子：把形状和材质结合，才能放进村子里 |
| Add to Scene | scene.add(cube); | - | ➕ 放进村子：没有 add，看不到你的房子 |
| Animation Loop | function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera);} animate(); | 和 setInterval 区别 | 🎢 魔法循环：浏览器每帧刷新村子画面，比定时器更流畅 |
| Cube Rotation | cube.rotation.x += 0.01; cube.rotation.y += 0.01; | - | 🔄 让房子跳舞：旋转房子，让村子动起来 |
| Render | renderer.render(scene, camera); | 渲染顺序 | 🎬 开拍：把 Scene + Camera 的画面画出来，每帧都要 render |
🎉 恭喜你，已经成功在 Three.js 新手村里搭好了你的第一个 “房子”🏠，看到了绿色的旋转立方体在你眼前欢快地跳舞💃。别小看这个 Hello World，它可不是随便画个方块——你已经掌握了 Scene🌳、Camera👀、Renderer🪄、Mesh🏗️ 这些村民的日常工作方式！
下一步，我们就要带着你的村庄升级：给它加点 “魔法光源🌟”、让房子动起来🔄、甚至召唤 村民（几何体👾） 自由活动。准备好了吗？Three.js 的世界比你想象的还要大，魔法与奇遇在前方等你！
💡 记住：每一个旋转的立方体，都是你踏入 3D 世界的第一步。别害怕踩坑——村民们都很友好，只要你敢尝试，村子就会活起来！
✨ 彩蛋提示：下一个篇章，我们将开启 “光影魔法🪄” 模式——不仅房子会动，光线也会跟着你的小手势跳舞！快去准备你的魔法手套🧤，村庄升级就等你了~
