Three.js 简介 #

什么是 3D 图形？ #

3D 图形是在二维屏幕上呈现三维空间物体的技术。通过数学计算和渲染技术，将三维物体投影到二维屏幕上，创造出具有深度感和立体感的视觉效果。

text 
┌─────────────────┐
│     3D 空间      │
│   (x, y, z)     │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│    渲染处理      │
│   Three.js      │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   2D 屏幕显示    │
│   (像素)        │
└─────────────────┘

什么是 Three.js？ #

Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库，由 Ricardo Cabello（Mr.doob）于 2010 年创建。它封装了 WebGL 的底层 API，提供了更直观、更易用的接口，让开发者能够轻松创建 3D 网页内容。

核心定位 #

text 
┌─────────────────────────────────────────────────────────────┐
│                         Three.js                             │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │   场景管理    │  │   几何体     │  │   材质系统   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │   光照系统    │  │   相机控制   │  │   动画系统   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

Three.js 的历史 #

发展历程 #

text 
2010年 ─── Three.js 诞生
    │
    │      Ricardo Cabello 创建
    │      ActionScript 移植到 JS
    │      WebGL 刚刚兴起
    │
2011年 ─── Three.js 开源
    │
    │      GitHub 开源发布
    │      社区开始贡献
    │
2012年 ─── 功能扩展
    │
    │      添加更多几何体
    │      改进材质系统
    │
2014年 ─── 广泛应用
    │
    │      大型项目采用
    │      社区快速增长
    │
2016年 ─── VR 支持
    │
    │      WebVR API 支持
    │      VR 模式支持
    │
2018年 ─── 模块化
    │
    │      ES6 模块支持
    │      架构优化
    │
2020年 ─── WebXR 支持
    │
    │      WebXR API
    │      AR/VR 统一
    │
2022年 ─── 持续进化
    │
    │      PBR 材质改进
    │      性能优化
    │
至今   ─── 行业标准
    │
    │      最流行的 Web 3D 库
    │      丰富的生态系统

里程碑版本 #

版本 时间 重要特性
r1 2010 初始发布
r50 2013 材质系统重构
r70 2015 ES6 支持
r100 2018 模块化架构
r120 2020 WebXR 支持
r150 2023 PBR 材质增强
r160 2024 性能优化

为什么选择 Three.js？ #

原生 WebGL 的复杂性 #

在使用 Three.js 之前，3D Web 开发面临以下问题：

javascript 
// 原生 WebGL：代码量大，难以理解
const vertexShaderSource = `
  attribute vec4 aPosition;
  void main() {
    gl_Position = aPosition;
  }
`;

const fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

// 需要手动编译着色器、创建缓冲区、设置属性...
// 几十行代码才能画一个三角形

Three.js 的解决方案 #

javascript 
// Three.js：简洁直观
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Three.js 的核心特点 #

1. 简单易用 #

Three.js 提供了直观的 API：

javascript 
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. 丰富的几何体 #

内置多种几何体类型：

javascript 
new THREE.BoxGeometry(1, 1, 1);        // 立方体
new THREE.SphereGeometry(0.5, 32, 32); // 球体
new THREE.CylinderGeometry(0.5, 0.5, 1); // 圆柱体
new THREE.PlaneGeometry(2, 2);         // 平面
new THREE.TorusGeometry(0.5, 0.2, 16, 100); // 圆环

3. 强大的材质系统 #

支持多种材质类型：

javascript 
new THREE.MeshBasicMaterial({ color: 0xff0000 });     // 基础材质
new THREE.MeshStandardMaterial({ color: 0x00ff00 });  // PBR 材质
new THREE.MeshPhongMaterial({ color: 0x0000ff });     // Phong 材质
new THREE.MeshPhysicalMaterial({ /* ... */ });        // 物理材质

4. 完整的光照系统 #

多种光源类型：

javascript 
new THREE.AmbientLight(0x404040);           // 环境光
new THREE.DirectionalLight(0xffffff, 1);    // 平行光
new THREE.PointLight(0xff0000, 1, 100);     // 点光源
new THREE.SpotLight(0xffffff, 1);           // 聚光灯

5. 动画系统 #

流畅的动画支持：

javascript 
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

6. 交互控制 #

丰富的控制器：

javascript 
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

Three.js 与其他 3D 库对比 #

Three.js vs Babylon.js #

特性 Three.js Babylon.js
定位 3D 渲染库 游戏引擎
学习曲线 中等 中等
文档 优秀 优秀
游戏功能 有限 完整
物理引擎 需集成 内置
适用场景 3D 展示 游戏/应用

Three.js vs PlayCanvas #

特性 Three.js PlayCanvas
类型 开源库 游戏引擎
编辑器 无 在线编辑器
学习成本 中等 低
灵活性 高 中等
团队协作 需自建 内置支持
适用场景 定制开发 快速开发

Three.js vs A-Frame #

特性 Three.js A-Frame
抽象层级 较低 较高
学习曲线 中等 平缓
VR 支持 需配置 原生支持
灵活性 极高 中等
声明式 否 是
适用场景 复杂项目 VR 快速开发

Three.js 的应用场景 #

1. 产品展示 #

javascript 
// 3D 产品展示
const loader = new THREE.GLTFLoader();
loader.load('product.glb', (gltf) => {
  const model = gltf.scene;
  model.scale.set(1, 1, 1);
  scene.add(model);
  
  // 自动旋转展示
  function animate() {
    requestAnimationFrame(animate);
    model.rotation.y += 0.005;
    renderer.render(scene, camera);
  }
  animate();
});

2. 数据可视化 #

javascript 
// 3D 数据柱状图
const data = [10, 20, 30, 40, 50];
data.forEach((value, index) => {
  const geometry = new THREE.BoxGeometry(0.8, value, 0.8);
  const material = new THREE.MeshStandardMaterial({ 
    color: new THREE.Color().setHSL(index / data.length, 0.7, 0.5)
  });
  const bar = new THREE.Mesh(geometry, material);
  bar.position.set(index * 1.5, value / 2, 0);
  scene.add(bar);
});

3. 游戏开发 #

javascript 
// 简单游戏场景
const player = new THREE.Mesh(
  new THREE.SphereGeometry(0.5),
  new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(player);

const enemies = [];
for (let i = 0; i < 10; i++) {
  const enemy = new THREE.Mesh(
    new THREE.BoxGeometry(0.5, 0.5, 0.5),
    new THREE.MeshStandardMaterial({ color: 0xff0000 })
  );
  enemy.position.set(
    Math.random() * 20 - 10,
    0.25,
    Math.random() * 20 - 10
  );
  enemies.push(enemy);
  scene.add(enemy);
}

4. 建筑可视化 #

javascript 
// 建筑模型展示
const building = new THREE.Group();

const floor1 = new THREE.Mesh(
  new THREE.BoxGeometry(10, 3, 10),
  new THREE.MeshStandardMaterial({ color: 0xcccccc })
);
floor1.position.y = 1.5;
building.add(floor1);

const floor2 = new THREE.Mesh(
  new THREE.BoxGeometry(8, 3, 8),
  new THREE.MeshStandardMaterial({ color: 0xdddddd })
);
floor2.position.y = 4.5;
building.add(floor2);

scene.add(building);

5. VR/AR 应用 #

javascript 
// WebXR VR 模式
import { VRButton } from 'three/addons/webxr/VRButton.js';

renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));

function animate() {
  renderer.setAnimationLoop(() => {
    // VR 渲染循环
    renderer.render(scene, camera);
  });
}

Three.js 的核心概念 #

场景（Scene） #

javascript 
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
scene.fog = new THREE.Fog(0x000000, 1, 100);

相机（Camera） #

javascript 
// 透视相机
const perspectiveCamera = new THREE.PerspectiveCamera(
  75,                                    // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1,                                   // 近裁剪面
  1000                                   // 远裁剪面
);

// 正交相机
const orthographicCamera = new THREE.OrthographicCamera(
  -5, 5, 5, -5,  // 边界
  0.1, 1000      // 裁剪面
);

渲染器（Renderer） #

javascript 
const renderer = new THREE.WebGLRenderer({
  antialias: true,      // 抗锯齿
  alpha: true,          // 透明背景
  powerPreference: 'high-performance'
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;

物体（Object3D） #

javascript 
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 1, 0);
mesh.rotation.set(0, Math.PI / 4, 0);
mesh.scale.set(1, 2, 1);
scene.add(mesh);

Three.js 的架构设计 #

模块化结构 #

text 
Three.js
├── core/           - 核心模块
│   ├── Object3D    - 3D 对象基类
│   ├── Scene       - 场景
│   └── BufferGeometry - 几何体
├── materials/      - 材质模块
│   ├── MeshBasicMaterial
│   ├── MeshStandardMaterial
│   └── ShaderMaterial
├── geometries/     - 几何体模块
│   ├── BoxGeometry
│   ├── SphereGeometry
│   └── PlaneGeometry
├── lights/         - 光源模块
│   ├── AmbientLight
│   ├── DirectionalLight
│   └── PointLight
├── cameras/        - 相机模块
│   ├── PerspectiveCamera
│   └── OrthographicCamera
└── renderers/      - 渲染器模块
    └── WebGLRenderer

渲染流程 #

text 
┌─────────────────────────────────────────────────────────────┐
│                    Three.js 渲染流程                          │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────────┐                                            │
│  │   场景图     │                                            │
│  │   (Scene)   │                                            │
│  └──────┬──────┘                                            │
│         │                                                    │
│         ▼                                                    │
│  ┌─────────────┐                                            │
│  │   视锥裁剪   │                                            │
│  │   Frustum   │                                            │
│  └──────┬──────┘                                            │
│         │                                                    │
│         ▼                                                    │
│  ┌─────────────┐                                            │
│  │   状态排序   │                                            │
│  │   Sorting   │                                            │
│  └──────┬──────┘                                            │
│         │                                                    │
│         ▼                                                    │
│  ┌─────────────┐                                            │
│  │   绘制调用   │                                            │
│  │   Draw Call │                                            │
│  └──────┬──────┘                                            │
│         │                                                    │
│         ▼                                                    │
│  ┌─────────────┐                                            │
│  │   GPU 渲染   │                                            │
│  │   WebGL     │                                            │
│  └─────────────┘                                            │
│                                                              │
└─────────────────────────────────────────────────────────────┘

浏览器兼容性 #

Three.js 支持所有支持 WebGL 的现代浏览器：

浏览器 最低版本 WebGL 版本
Chrome 9+ WebGL 2.0
Firefox 4+ WebGL 2.0
Safari 5.1+ WebGL 1.0
Edge 12+ WebGL 2.0
Opera 12+ WebGL 2.0

学习建议 #

  1. 掌握 JavaScript 基础：ES6 语法、面向对象、异步编程
  2. 理解 3D 数学基础：向量、矩阵、四元数
  3. 从简单开始：先创建简单场景，逐步增加复杂度
  4. 多看示例：官方示例库有大量参考
  5. 动手实践：在实际项目中使用 Three.js

下一步 #

现在你已经了解了 Three.js 是什么，接下来学习 基础概念，开始你的 3D Web 开发之旅！

最后更新：2026-03-28