three.js 是什么

从一个需求说起

假设你要在网页上放一个能旋转的 3D 立方体。浏览器本身不会画 3D，它只认识 HTML、CSS 和 JavaScript。要画 3D，得借助浏览器内置的 WebGL 接口。

WebGL（Web Graphics Library）是浏览器提供的 JavaScript 图形 API。它能把绘图任务交给显卡（GPU），让网页拥有接近原生应用的图形性能。你平时看到的网页 3D 效果、在线 3D 展厅、浏览器里的小游戏，绝大多数都是 WebGL 渲染出来的。

但 WebGL 是很底层的 API，它的绘图单位只有点、直线和三角形。想画一个立方体，你得先把立方体的 8 个顶点拆成 12 个三角形，再写两种着色器（Shader）：顶点着色器负责计算每个顶点的位置，片元着色器负责计算每个像素的颜色。这还只是静态的，加上光照、旋转、缩放，代码量会迅速膨胀。直接写 WebGL，几百行代码只能画一个简单的立方体。

这时候 three.js 出场了。

three.js 是什么

three.js 是一个开源的 JavaScript 3D 图形库，2010 年由 Ricardo Cabello（网名 mrdoob）创建，MIT 协议，免费可商用。它把 WebGL 的底层细节封装起来：

• 不用写着色器：用材质（Material）就能控制物体外观
• 不用拆三角形：用几何体（Geometry）就能定义物体形状
• 不用手算坐标变换：给对象设置 position、rotation 就能移动和旋转
• 不用管理渲染流程：场景、相机、渲染器三件套帮你搞定

同样的立方体，用 three.js 大约二十行代码就能画出来。它跨浏览器、轻量、纯 JavaScript 实现，任何会写网页的人都能上手。

它处在什么位置

如果把 3D 开发按难度排序，大概是这样的：

• 裸 WebGL：最底层，自由但痛苦，适合学习图形学原理
• three.js：封装了 WebGL 的常用功能，灵活度和易用性平衡得很好
• 游戏引擎（如 Unity、Babylon.js）：功能最全，但体量大、上手成本高

three.js 不是游戏引擎，而是一个图形库。它提供的是”画图”的能力，而不是”做游戏”的整套流程。这个定位让它既轻量又灵活：小到一个按钮的动效，大到整个 3D 展厅，都能用它实现。

three.js 的生态也很完整：官方文档、近 600 个可运行示例、大量官方扩展（控制器、加载器、后期处理等），还有庞大的社区。遇到问题，大概率在官方示例里能找到答案。

名字与社区

three.js 的名字就是「3D」加 .js 后缀。它的 GitHub 仓库是 mrdoob/three.js，长期是 JavaScript 领域星标最多的项目之一。遇到文档解决不了的问题，可以去官方论坛 discourse.threejs.org 搜索，很多坑都有人踩过。

官方文档、官方示例和官方论坛，是学习 three.js 的三个主要阵地，本教程会反复引用。

三个核心概念

学 three.js 前，先记住三个词：场景、相机、渲染器。

• 场景（Scene）：装所有 3D 物体的小宇宙
• 相机（Camera）：决定从哪个角度看小宇宙
• 渲染器（Renderer）：把场景按相机视角画到 canvas 上

几乎所有 three.js 程序都由这三样打底。第 4 章会用完整例子把它们串起来，现在有个印象就行。

three.js 能做什么

能力范围很广，举几个常用的：

• 绘制物体：几何体、网格（Mesh）、线条、粒子
• 控制外观：材质、纹理、灯光、阴影
• 运行动画：属性动画、骨骼动画、变形动画
• 加载模型：glTF、OBJ、FBX 等格式
• 交互反馈：鼠标拾取（Raycaster）、轨道控制器（OrbitControls）、VR/AR（WebXR）

应用场景同样多：产品 3D 展示页、数据可视化大屏、在线教育演示、小游戏，以及各种创意官网。比较知名的案例有 Epic 的 Moments of Happiness、Google 的 Interland 安全教育游戏、Garden Eight 创意网站。也可以去 threejs.org 的官方示例页逛一圈，直观感受它能做什么。

three.js 不能做什么

过来人常提醒：three.js 是图形库，不是游戏引擎。

• 没有物理引擎：重力、碰撞要自己写或用第三方库
• 没有内置 UI：按钮、面板要用 HTML/CSS 自己做
• 没有编辑器：虽然官方有个在线编辑器，但主流流程是写代码
• 不做网络同步：多人联机要自己实现
• 不做资源管理：模型、纹理的加载进度要自己处理

另外它跑在浏览器里，性能上限取决于用户设备的 GPU。场景再炫，也要考虑低端手机上跑不跑得动。实际项目里，移动端是 first-class 场景，不是可选项。

版本体系：r185

three.js 不用语义化版本号（1.x、2.x 那种），而是用修订号（revision）：

• 每个版本叫 r152、r160、r185 这种形式
• 大约每月发布一个
• npm 包名按规则映射：r185 对应 npm 版本 0.185.0

查最新版本：

npm view three version

代码里也能随时确认自己用的是哪个版本（在已经引入 three.js 的模块里执行）：

console.log(THREE.REVISION); // 185

本教程以 r185（npm 包 three@0.185.0，2026-07-01 发布）为准。写代码时务必锁定版本：three.js 迭代很快，不锁版本的话，今天能跑的代码下个月可能就报错。

r185 时代要知道的三件事

网上老教程很多，但版本可能很旧。对照这三点判断教程是否过时：

1. 仅支持 WebGL2：r163 起 three.js 移除了 WebGL 1 支持，浏览器必须支持 WebGL2（现代浏览器都支持）
2. 色彩管理默认开启：r152 起 SRGBColorSpace 色彩空间管理默认打开，旧教程里手动设置 outputEncoding 的代码已经不需要了
3. Geometry 已移除：r125 起只有 BufferGeometry，老代码里的 THREE.Geometry、BoxBufferGeometry 都已不存在

学习前提

学 three.js 不需要 WebGL 和图形学基础，但需要：

• 会写 HTML 和 CSS，不用精通
• 会基础 JavaScript：变量、函数、对象
• 一台能上网的电脑，一个现代浏览器

满足这些就够了。JavaScript 遇到不懂的语法，查 MDN（developer.mozilla.org）就行，不用系统学一遍。

下一节我们搭建开发环境。