学习资源与进阶路线

官方资源：文档、示例、论坛

官网 threejs.org 是唯一的信息源头。首页不定期更新全球优秀作品（很多来自论坛 showcase 区），值得常看。核心入口三个：

1. 官方文档（docs）：分 Manual（手册）和 API Reference（API 参考）两部分。手册讲”现代用法”，API 参考按字母列出全部类。r185 的 API 参考有近 800 个类，当字典查，别从头读
2. 官方示例（examples）：近 600 个可运行示例，覆盖渲染器、几何体、材质、加载器、后期处理、WebGPU 等全部主题。每个示例都能看源码、改参数。这是最重要的学习素材
3. 官方论坛 discourse.threejs.org：最活跃的求助地，2017 年至今积累了大量问答。提问前先搜索，九成问题有人问过

GitHub 仓库（mrdoob/three.js）不是求助站，只用来提 bug。交流渠道还有官方 Discord（闲聊、展示作品）和 Stack Overflow（带 three.js 标签的问题）。遇到问题，论坛 + 示例 + 文档三件套，基本没有解决不了的。

系统课程：threejs-journey

Three.js Journey 是 Bruno Simon 的付费视频课程（threejs-journey.com），被公认为最好的 three.js 系统课。它有 69 个课时、90 多小时视频，覆盖基础、经典技巧、着色器、物理、后期处理、性能优化，还包含 React Three Fiber 专题。课程的持续更新是它最大的优点：发布至今跟着 three.js 版本走了好几轮，不会教你过时 API。预算有限的替代方案：Bruno Simon 的 YouTube 频道有免费开发日志，官方示例也能学到同样的 API。

免费书籍与文档

• discoverthreejs.com：免费开源电子书，英文，讲解细致，专门有一章讲 React/Vue/Angular/Svelte/TypeScript 集成。适合精读，和本教程配合使用
• MDN 文档：WebGL、WebGPU 的浏览器原生 API 说明，补图形学概念时查
• 《Three.js 开发指南》（learning-threejs）：经典中文译作，但示例基于非常老的 r63，Geometry、全局 THREE 都已过时。只读概念，别抄代码

中文社区

• webgl3d.cn：郭隆邦的中文教程站，three.js、WebGL、WebGPU 都有，更新较新，中文读者友好
• 掘金、知乎、B 站：大量中文教程和视频，质量参差，注意发布时间和版本号。标题写着”three.js 入门”的旧文，很可能还在用 r1xx 的写法
• API 参考没有官方中文版；官方手册（manual）有社区维护的中文翻译，托管在官方域名下；另有一些社区镜像站，留意同步的版本

学习路径建议

1. 阶段一：打基础（本教程 40 章）。核心是理解场景、相机、渲染器三件套，以及几何体、材质、灯光、动画、模型加载的配合。每章的小示例都亲手敲一遍
2. 阶段二：改官方示例。挑一个感兴趣的示例（比如粒子、glTF 模型、后期处理），改参数、改结构，观察变化。改坏了大不了重开，这是成本最低的试错
3. 阶段三：做小项目。一个完整的小场景比 100 个示例都练人：加载模型、交互、性能优化、部署，全程走一遍
4. 阶段四：选方向深入。三个主流方向：
   • 着色器与渲染：TSL → GLSL/WGSL → 图形学基础（光照模型、PBR）
   • 性能与工程：InstancedMesh、LOD、WebGPU、R3F 集成
   • 可视化与产品：数据可视化（配合 ECharts GL）、数字孪生、3D 展厅

进阶路上补两块硬知识：线性代数（向量、矩阵、四元数，three.js 里天天用）和图形学基础（坐标系、光照、纹理采样）。不深也不难，够用即可，卡住时回来看。

新手常见误区

• 照抄旧代码：网上大量教程还在用 THREE.Geometry、全局 THREE 变量、WebGL1 写法。认准版本号：r125 之后 Geometry 就没了，r163 之后 WebGL1 也没了
• 只看不写：three.js 的 API 靠手感，不靠记忆。打开编辑器写一个立方体，比读十篇文章有用
• 跳过性能优化：能跑和能流畅跑是两回事。第 37 章的工具学会就用
• 一上来啃着色器：GLSL、矩阵、光照模型对新手是三重暴击。先把场景、材质、加载器玩熟，着色器是”再往深走”的选项，不是必经之路
• 把 three.js 当游戏引擎：它是图形库，没有编辑器、碰撞、物理、场景管理。游戏需求考虑 Babylon.js，或自己配物理库（cannon-es、Rapier）
• 遇到问题不查官方：报错信息直接搜官方论坛和 GitHub issues，往往有现成答案；中文搜索引擎可能把你带到过时教程
• 忽视版本差异：教程说”当前版本”，三个月后可能就变了。写代码前确认 three 包版本，升级后跑一遍官方迁移说明

最后说几句

40 章学完，你已经掌握了 three.js 的核心：从画一个立方体，到灯光阴影、模型动画、着色器、性能优化，再到 WebGPU 和框架集成。接下来的路，官方示例是你的老师，论坛是你的同学，动手做是你的作业。

本教程到这里结束。想深入哪一块，回到对应章节，按”学习路径建议”继续。祝你写出第一个让人”哇”的 3D 页面。