Three.js #

什么是 Three.js？ #

Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库，它让在网页上创建和展示 3D 内容变得简单。Three.js 封装了 WebGL 的复杂性，提供了直观的 API，让开发者无需深入了解图形学就能创建令人惊叹的 3D 体验。

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 Three.js：

1. 入门基础 #

主题	描述	文档链接
Three.js 简介	Three.js 的定义、特点、历史与应用场景	intro.md
基础概念	场景、相机、渲染器核心三要素	basics.md

2. 核心组件 #

主题	描述	文档链接
几何体	各种几何形状的创建与使用	geometry.md
材质	为物体添加外观和质感	material.md
光照	场景中的光源类型与配置	light.md
相机详解	透视相机与正交相机的深入理解	camera.md

3. 进阶功能 #

主题	描述	文档链接
动画系统	创建流畅的 3D 动画效果	animation.md
交互控制	鼠标、键盘与触摸交互	interaction.md
纹理贴图	为物体添加丰富的纹理效果	textures.md
着色器	自定义 GLSL 着色器编程	shaders.md

4. 高级主题 #

主题	描述	文档链接
高级主题	后期处理、物理引擎、粒子系统	advanced.md
性能优化	提升渲染性能的最佳实践	performance.md
实战案例	完整项目案例与最佳实践	examples.md

学习路径 #

入门阶段（Three.js 新手） #

了解 Three.js 的基本概念和优势
搭建 Three.js 开发环境
掌握场景、相机、渲染器三要素
创建第一个 3D 场景
理解坐标系和变换

进阶阶段（Three.js 熟练） #

学习各种几何体的创建
掌握材质系统
理解光照原理
添加纹理贴图
实现基本的交互控制

高级阶段（Three.js 专家） #

掌握动画系统
学习着色器编程
实现后期处理效果
性能优化技巧
物理引擎集成

大师阶段（Three.js 大师） #

创建自定义几何体
编写复杂着色器
构建完整 3D 应用
跨平台部署优化
参与开源社区贡献

Three.js vs 其他 3D 库 #

特性	Three.js	Babylon.js	PlayCanvas	A-Frame
学习曲线	中等	中等	平缓	平缓
灵活性	极高	高	中等	中等
文档质量	优秀	优秀	良好	良好
社区规模	最大	大	中等	中等
游戏引擎	否	是	是	否
VR 支持	✅	✅	✅	✅
开源免费	✅	✅	⚠️ 部分收费	✅

快速开始 #

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Three.js 快速开始</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
    
    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);
    
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    
    camera.position.z = 5;
    
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>

核心概念预览 #

场景（Scene） #

javascript

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

相机（Camera） #

javascript

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 0, 5);

渲染器（Renderer） #

javascript

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

网格（Mesh） #

javascript

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

光照（Light） #

javascript

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

资源推荐 #

Three.js 官方网站：最权威的 Three.js 文档
Three.js GitHub：Three.js 源码和问题反馈
Three.js Examples：官方示例集合
Three.js Journey：优质学习课程

贡献指南 #

欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。

更新日志 #

2026-03-28：创建初始版本，包含完整的 Three.js 学习大纲

继续探索本指南，逐步掌握 Three.js 技术，从新手成长为 3D Web 开发专家！