WebGL+Three.js 入门与实战，系统学习 Web3D 技术【完整18章】

这套资料围绕 WebGL 与 Three.js 展开，共 18 章，定位是 Web3D 方向从零起步到能落地的完整链路。它不属于那类把 API 念一遍就结束的视频，而是把渲染管线、场景组织、交互与性能这些工程问题拆开讲。对照 GetFromCode 上的资料，它更适合拿来做「边看边写」的参照物，而不是收藏起来从头播到尾。

技术栈与前置要求

核心依赖两块：底层是 WebGL，负责与 GPU 对话、管理缓冲区、着色器与绘制调用；上层是 Three.js，把相机、场景图、材质、光照、几何体这些概念封装成可组合的对象。课程没有跳过 WebGL 直接讲 Three.js，这个顺序是对的——不理解顶点着色器与片元着色器各自负责什么，后面调材质、写法线、做后处理时就只能照抄参数。

前置知识不多，但最好扎实：JavaScript 的 ES6 语法、DOM 事件模型、一点线性代数常识（向量、矩阵、点乘叉乘的几何含义）。向量和矩阵不必手推，但要能看懂位移、旋转、缩放为什么用 4x4 矩阵表达，以及相机投影矩阵里的近裁面、远裁面、视场角在做什么。如果这块模糊，建议在进入中段之前补一下，不然后面做相机控制和光照计算会卡住。

结构脉络与学习节奏

18 章的编排大致是三段式：前半段建立概念模型，讲清渲染循环、坐标系、几何体与材质的关系；中段进入实战，做场景搭建、模型加载、相机交互、光照与阴影；后段偏向工程化，涉及动画、粒子、着色器自定义、性能优化与项目组织。这个节奏的好处是每学一个概念都能立刻在页面上看到结果，反馈闭环短。

建议按章节顺序推进，但不要平均用力。渲染基础、相机与控制器、光照与阴影、自定义着色器这几块值得反复看，因为它们决定了后面所有效果的上限；而一些纯配置类的章节可以快速过，用到时再回查。每章结束后最好自己重写一遍示例，改动几个参数观察画面变化，比单纯看演示更能建立直觉。

可复用的模块与工程习惯

Three.js 项目的可维护性，很大程度上取决于你怎么组织代码。这套资料里可以提炼出几类可复用结构：场景初始化与渲染循环的封装、资源加载与缓存、相机控制器的抽象、动画与时间步长管理、着色器代码与材质配置的分离。把这些抽成独立模块，后续做新场景时可以直接搭骨架，而不是每次从零写new THREE.Scene()。

另外几个工程习惯值得在练习阶段就养成：渲染循环里用统一的时间增量驱动动画，避免不同刷新率下速度不一致；几何体、材质、纹理用完及时释放，防止长时间运行后内存攀升；调试时优先用坐标轴辅助、网格辅助、性能面板定位问题，而不是盲改参数。这些细节在教程里可能只有一两句话，但真正影响项目能不能跑稳。

适合谁，以及怎么用这份资料

适合三类人：前端开发者想往可视化、数字孪生、互动营销方向延伸；做数据可视化但对 3D 渲染不熟，需要理解场景图与相机逻辑；有图形学兴趣、想从 Three.js 入手再反向补 WebGL 与着色器基础的人。不太适合完全没写过 JavaScript、或者只想快速套一个现成模板的人。

使用方式上，建议把它当作对照实践的素材：先跑通示例，再关掉参考自己写一遍，最后做一个小场景——比如一个可旋转、可缩放、带光照与简单动画的模型展示页。遇到问题时回看对应章节，比顺序刷完更高效。18 章的量不小，能不能转化成自己的东西，取决于你动手改了多少行代码，而不是看了多少分钟视频。