夜雨聆风
学 Three.js,别一上来就啃官方文档:这个教程站更适合从 0 到项目
如果你想学 Three.js，我不建议一开始就直接冲官方文档。
官方文档当然重要，但它更像 API 手册：你知道自己要查什么，它很好用；你还不知道场景、相机、材质、光照、动画、模型加载这些东西怎么连起来，它就会显得很散。
最近重新翻到一个很适合系统学习 Three.js 的网站：
sbcode.net 的 Three.js and TypeScript Tutorials
网站地址：https://sbcode.net/threejs/
它不是那种只教你画一个旋转立方体的入门文章，而是一套完整课程的配套文档。视频内容可以通过 Udemy 或 YouTube Membership 学，但更关键的是：网站把课程里的代码、章节和示例都整理成了在线文档，能直接查、直接复制、直接跟着改。
对想认真做 Web 3D 的前端开发者来说，这个站很值得收藏。
它解决的不是“会不会写一个 demo”
很多 Three.js 教程的问题是：前 30 分钟都很顺。
创建 Scene，创建 Camera，创建 Renderer，加一个 BoxGeometry，让它转起来。你会觉得自己已经入门了。
但真正开始做项目时，问题马上变成：
• 项目应该怎么搭？
• TypeScript 怎么配？
• 模型怎么加载？
• 光照和阴影为什么不对？
• OrbitControls、PointerLockControls 什么时候用？
• GLTF 动画怎么播？
• 物理引擎怎么接？
• 做完以后怎么部署？
• WebGPU 和 TSL 到底该不该看？
这才是 Three.js 学习里最容易卡住的地方。
sbcode 这个站的价值就在这里：它不是把 Three.js 拆成一堆孤立知识点，而是按“从空项目到可上线项目”的顺序来组织。
内容覆盖很完整
从目录看，它基本把一个 Three.js 项目常见的主线都覆盖了：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
这套结构对学习者很友好，因为它把“你最终要做一个项目”这件事放在了中心。
你不是学完一个 API 就结束，而是一路看到：一个 Three.js 应用怎么从本地开发，逐步长成一个带交互、资源加载、物理效果、部署流程的完整项目。
我最推荐看的几个部分
1. 工程模板部分
很多人学 Three.js 卡住，不是因为数学不会，而是项目结构一开始就乱。
这个站从开发环境、创建 boilerplate、安装 Three.js 和类型定义、导入模块这些很基础的地方讲起。看起来不酷，但非常必要。
尤其是你想用 TypeScript 写 Three.js，而不是在一个 HTML 文件里堆脚本，这部分能帮你把工程起点搭稳。
2. 模型加载和动画
真实项目里，很少有人只用代码画几何体。更多时候你会加载设计师给你的 GLB/GLTF 模型，然后处理材质、动画、压缩、加载进度。
站里有 GLTF Loader、DRACO Loader、GLTF Animations 等章节，比“复制一个 loader 示例”更系统。
如果你要做产品展示、角色展示、展厅、城市模型、数字孪生，这些内容基本都会用上。
类似 Spotlight 这样的案例，适合用来理解光照、阴影、材质和调试面板之间的关系。
3. Rapier 物理
Three.js 本身只负责渲染，不负责物理。
如果你想做碰撞、重力、刚体、关节，就需要接物理引擎。这个站用 Rapier 做示例，包含刚体、碰撞体、重力参数、物理世界更新，以及把物理对象的位置同步回 Three.js Mesh 的完整流程。
这部分适合想做互动游戏、物理实验、可操作 3D 场景的人。
Gerstner Water Shader 这个案例更偏视觉效果，能看到它对 shader、水面、交互参数调试这类内容也有覆盖。
4. WebGPU Renderer 和 TSL
这部分比较新，也不一定适合所有人马上用到生产里。
但它很值得看，因为 Three.js 已经开始支持实验性的 WebGPU Renderer。网站里展示了从 WebGLRenderer 切到 WebGPURenderer 的基本方式，也介绍了 TSL（Three Shader Language）这种更接近 JavaScript 的着色器写法。
如果你关心 Web 3D 的下一阶段，这部分可以提前建立概念。
它和官方文档的关系
我的建议是：
用 sbcode 建学习路径，用官方文档查细节。
官方文档适合查某个类、某个参数、某个方法。比如你知道自己要查 MeshStandardMaterial，官方文档很好。
但如果你还在回答“我该按什么顺序学”“这些 API 怎么组成项目”“为什么学完基础还是做不出东西”，sbcode 更适合。
它的优势不是权威性，而是路径感。
适合谁
这个网站特别适合这几类人：
1. 前端开发者想入门 Three.js已经会 JavaScript/TypeScript，但对 3D 图形不熟。你需要的不是抽象理论，而是一条能跑起来、能逐步加功能的路线。
2. 做过几个 Three.js demo，但没做过完整项目的人你可能会写旋转立方体、粒子效果、简单模型展示，但一到工程化、资源加载、部署、性能调试就卡住。这个站能补上中间层。
3. 想用 AI 辅助写 Three.js 的人现在很多人会让 Claude Code、Cursor、Codex 写 Three.js。但 AI 最容易在 3D 代码里犯错：导入路径错、API 版本错、渲染循环写乱、控制器没更新。你可以把 sbcode 当成一个”人工可读、AI 也能参考”的教程库。让 AI 按其中某个章节的方式实现，通常比让它凭空写要稳定。
4. 想理解官方 examples 的人Three.js 官方 examples 很强，但对新手来说经常是”能运行，但看不懂为什么这么写”。sbcode 的课程目标之一就是让你最后能更好地理解官方 examples，然后继续自己做更复杂的应用。
不适合谁
它也不是万能的。
如果你只是想快速复制一个炫酷特效，可能会觉得它太系统、太工程化。
如果你已经是 WebGL、Shader、图形学老手，它里面很多基础章节也会显得慢。
如果你完全不懂 JavaScript，建议先补 JS/TS 基础，否则 Three.js、TypeScript、构建工具、3D 概念会一起压过来。
我会怎么用这个站
如果是从零开始，我会按这个顺序：
1. 先看开发环境和 boilerplate，把项目跑起来
2. 跟着写 Scene、Camera、Renderer、Animation Loop
3. 学几何体、材质、光照、阴影，做一个最小可看的场景
4. 加 OrbitControls 和 Raycaster，让场景能交互
5. 学 GLTF Loader，加载真实模型
6. 看 GLTF Animations 和 DRACO Loader，处理动画和压缩
7. 如果项目需要互动，再看 Rapier 物理
8. 最后看部署章节，把作品放到线上
不要一口气看完所有章节。Three.js 最好的学习方式是：每学一小段，就改一个自己的小项目。