2025年10月12日

第一篇：认识 Three.js —— 从零搭建你的第一个 3D 世界

通过场景、相机与渲染器的基础讲解，带你迈入 Web 3D 的大门。

一、Three.js 是什么？

Three.js 是一个用 JavaScript 编写的 3D 渲染库，它封装了复杂的 WebGL 接口，让你只用几行代码就能创建炫酷的 3D 场景。

你可以用它做：

🌍 3D 网站与交互特效
🧱 虚拟展厅 / 建筑可视化
🎮 游戏与交互动画
🎨 数据可视化 / 科学模拟

二、创建项目环境

✅ 方法一：使用 Vite 快速创建

# 创建项目
pnpm create vite threejs-content --template vanilla

cd threejs-content
pnpm install

然后安装 Three.js：

pnpm add three
pnpm add --save-dev @types/three // 如果使用 TS

三、编写第一个 3D 场景

新建 index.vue，编写以下代码：

import * as THREE from 'three';
import { onMounted } from 'vue';

let renderer: THREE.WebGLRenderer;
let scene: THREE.Scene;
let camera: THREE.Camera;
let cubes: THREE.Mesh[];

// 根据指定颜色生成新材质
function makeInstance(
  geometry: THREE.BoxGeometry,
  color: THREE.ColorRepresentation,
  x: number
) {
  // 5. 创建一个基本的材质并设置它的颜色
  const material = new THREE.MeshPhongMaterial({ color });
  // 6. 创建一个网格对象（包含几何体、材质）
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  cube.position.x = x;

  return cube;
}

function render(time: number) {
  time *= 0.001; // 将时间单位变为秒

  cubes.forEach((cube, ndx) => {
    const speed = 1 + ndx * 0.1;
    const rot = time * speed;
    cube.rotation.x = rot;
    cube.rotation.y = rot;
  });

  renderer.render(scene, camera);

  requestAnimationFrame(render);
}

onMounted(() => {
  const canvas = document.querySelector('#three-container') || undefined;
  // 1. 渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true, canvas });

  // 2. 相机
  const fov = 75;
  const aspect = 2;
  const near = 0.1;
  const far = 5;
  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  // 3. 初始化场景
  scene = new THREE.Scene();

  // 4. 创建一个包含盒子信息的立方几何体
  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  cubes = [
    makeInstance(geometry, 0x44aa88, 0),
    makeInstance(geometry, 0x8844aa, -2),
    makeInstance(geometry, 0xaa8844, 2),
  ];

  // 7. 将 cube 添加到 scene
  cubes.forEach((cube) => {
    scene.add(cube);
  });

  // 创建平行光
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(-1, 2, 4);
  scene.add(light);

  // 8. 将 camera 和 scene 传到 renderer
  renderer.render(scene, camera);

  requestAnimationFrame(render);
});

<canvas id="three-container"></canvas>

保存后打开浏览器 → 你会看到三个正方体缓缓旋转 🌐✨

四、核心概念讲解

概念	说明
Scene	场景，所有 3D 对象的容器
Camera	相机，定义我们观察的角度与范围
Renderer	渲染器，将 3D 场景绘制到屏幕上
Mesh	网格对象，由几何体（形状）+ 材质（外观）组成
Light	光源，用来让物体产生阴影与明暗变化

五、结构图理解（示意）

Scene
 ├─ Camera
 ├─ Light
 └─ Mesh
     ├─ Geometry (Box)
     └─ Material (Color)

渲染循环中，renderer.render(scene, camera) 就是告诉 Three.js：

“用相机的视角去拍摄场景，然后把结果画出来。”

六、可扩展小实验 💡

1️⃣ 把方块颜色改成渐变
2️⃣ 换成球体：new THREE.SphereGeometry(0.8, 32, 32)
3️⃣ 添加多个立方体组成阵列
4️⃣ 使用 OrbitControls 实现鼠标旋转观察

七、总结

学到的知识	内容
✅ Three.js 基本结构	Scene + Camera + Renderer
✅ 如何渲染物体	Mesh(geometry + material)
✅ 动画循环	requestAnimationFrame()
✅ 响应式布局	监听 `resize` 事件

JS 基础-作用域闭包

vue3 知识点详解