Three.js 入门实战：安装、基础概念与第一个场景⭐

学习本章节你不必要追求细节，你只需要了解基本的3D场景需要哪些元素组成，如何通过组成3D场景的元素属性调整来控制3D物体或者场景即可。

在上一篇文章中我们初识了 Three.js，今天我们正式进入实战环节 🎯

前置准备：

• ✅ 你需要能够科学上网

本文将带你完成以下目标：

• ✅ 安装 Three.js
• ✅ 理解 Three.js 的核心构成元素
• ✅ 创建一个包含多个物体、光照和交互控制的 3D 场景

让我们开启这趟 Web 3D 的动手之旅 🚀

---

🧱 Three.js 的基础构成

Three.js 的世界由几个关键部分构成，它们共同构成了一个完整的 3D 场景系统。

1️⃣ Scene（场景）

Scene 就是你的 3D 世界舞台，所有内容都必须添加进场景才能渲染出来。

const scene = new THREE.Scene();

2️⃣ Camera（相机）

Camera 决定了你从哪个角度、位置观察这个 3D 世界。

Three.js 支持多种相机，最常用的是透视相机 PerspectiveCamera，它模拟了人眼的透视感：

const camera = new THREE.PerspectiveCamera(
  75,                      // 视野角度（FOV）
  window.innerWidth / window.innerHeight, // 宽高比
  0.1,                     // 最近可见距离
  1000                     // 最远可见距离
);
camera.position.z = 5; // 往后移动相机，才能看到物体

3️⃣ Renderer（渲染器）

Renderer 将场景和相机生成的画面真正“画”到网页上。

const renderer = new THREE.WebGLRenderer({ antialias: true }); // 抗锯齿更平滑
renderer.setSize(window.innerWidth, window.innerHeight); // 设置画布大小
document.body.appendChild(renderer.domElement); // 添加到页面

4️⃣ Mesh（网格） = 几何体 + 材质

Mesh 是场景中的物体，由几何体 + 材质组成。

const geometry = new THREE.BoxGeometry(); // 立方体几何体
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 }); // 带光照的材质
const cube = new THREE.Mesh(geometry, material); // 网格对象
scene.add(cube); // 添加到场景中

5️⃣ Light（光源）

光源决定了你看到的物体亮不亮、怎么亮。

const light = new THREE.PointLight(0xffffff, 1); // 白色点光源，强度为1
light.position.set(1, 1, 1); // 放在场景右上角
scene.add(light);

常用光源有：

• AmbientLight：环境光，照亮所有物体

• PointLight：点光源，从一点向外发射

• DirectionalLight：平行光，如太阳光

6️⃣ Controls（交互控制器）

Controls 允许用户用鼠标交互：旋转、缩放、移动视角。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

🧪 实战一：CDN 快速体验方式（零依赖，适合初学者）

• 演示地址：https://stackblitz.com/edit/stackblitz-starters-qktmohfp?file=script.js💻

🧪 实战二：使用 Vite + npm 安装 three（三方依赖方式）

• 演示地址：https://stackblitz.com/edit/vitejs-vite-uxm1c3tr?file=index.html💻

• ✅ 增加鼠标控制

• ✅ 增加窗口大小自适应

📌 总结

🎉 到这里，你已经掌握了创建 Three.js 场景的基本流程：

• 设置 Scene / Camera / Renderer

• 添加 Mesh / Light / Controls

• 实现响应式和用户交互

这也是所有 Three.js 项目的基本框架，掌握它你就迈出第一步啦！

---

🔮 下一篇预告：Three.js + React = 更强的魔法 ✨

下一节我们将：

• 使用 react-three-fiber 快速重构上述场景

• 体验将 Three.js 融入 React 组件系统

为我们即将开发的 个人主页 3D 场景 打下基础 💼🌌