第一步：CSS 铺满全屏 首先，我们要让 Canvas 元素本身在网页里占满位置。这步最简单，但是很关键，很多人容易漏掉 display: block。 默认情况下，Canvas 是 inline 元

🎬 核心概念：上帝的“片场”

在 Three.js 的世界里，想要画面动起来，你只需要凑齐这“四大金刚”：

1. 场景 (Scene) —— 你的片场

想象你是一个导演，首先你得有个场地。在 Three.js 里，Scene 就是这个场地。它是一个容器，用来放置所有的物体、灯光和摄像机。

const scene = new THREE.Scene(); //（这就开辟了一个场地）

2. 摄像机 (Camera) —— 你的眼睛

片场有了，观众怎么看？得架摄像机。 Three.js 里最常用的是 透视摄像机 (PerspectiveCamera)。 这就好比人的眼睛，近大远小。

• 你需要告诉它：
  • 视角 (FOV)：镜头是广角还是长焦？
  • 长宽比 (Aspect)：电影是 16:9 还是 4:3？
  • 近剪切面 & 远剪切面：太近看不见，太远也看不见。

3. 渲染器 (Renderer) —— 你的放映机

场景布置好了，摄像机架好了，谁把画面画到屏幕（Canvas）上？这就是渲染器的工作。它负责计算每一帧画面，把 3D 的数据“拍扁”成 2D 的像素点显示在网页上。

4. 网格 (Mesh) —— 你的演员 🕺

这是最关键的部分！片场不能是空的，得有东西。在 Three.js 里，一个可见的物体通常被称为 Mesh (网格)。 一个 Mesh 由两部分组成（缺一不可）：

• 几何体 (Geometry)：演员的身材。是方的？圆的？还是复杂的角色模型？（比如 BoxGeometry 就是个立方体骨架）。
• 材质 (Material)：演员的衣服。是金属质感？塑料质感？还是发光的？什么颜色？（比如 MeshPhongMaterial 就是一种这就好比给骨架穿上了皮肤）。

---

⚡️ 实战：3分钟手搓一个旋转立方体

别眨眼，核心代码真的少得离谱。我们来把上面的概念串起来：

第一步：搭建舞台（初始化）

// 1. 创建场景
const scene = new THREE.Scene();

// 2. 创建摄像机 (视角75度, 宽高比, 近距0.1, 远距1000)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 把摄像机往后拉一点，不然就在物体肚子里了
camera.position.z = 5;

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 把渲染出来的 canvas 塞到页面里
document.body.appendChild(renderer.domElement);

第二步：请演员入场（创建物体）

// 1. 骨架：一个 1x1x1 的立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 2. 皮肤：绿色的，对光照有反应的材质
const material = new THREE.MeshPhongMaterial({ color: 0x44aa88 });

// 3. 合体：创建网格
const cube = new THREE.Mesh(geometry, material);

// 4. 放到场景里！
scene.add(cube);

第三步：打光（Light）

如果你用的是 MeshPhongMaterial 这种高级材质，没有光就是漆黑一片。

// 创建一个平行光（类似太阳光）
const light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set(-1, 2, 4);
scene.add(light);

第四步：Action！(动画循环)

电影是每秒 24 帧的静态图，Three.js 也一样。我们需要一个循环，不停地让渲染器“拍照”。

function animate() {
    requestAnimationFrame(animate); // 浏览器下次重绘前调用我

    // 让立方体动起来
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 咔嚓！渲染一帧
    renderer.render(scene, camera);
}

animate(); // 开始循环

📂 核心代码与完整示例：  my-three-app

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货