这门课解决什么痛点

WebGL 和 Three.js 是前端 3D 开发的主流技术栈，但学习门槛一直较高。很多人卡在 WebGL 的底层数学概念上，比如向量、矩阵变换、着色器语言 GLSL，这些内容抽象且枯燥，直接看文档容易劝退。更常见的情况是，会调用 Three.js 的 API，但遇到性能问题或自定义效果时束手无策，因为不了解图形渲染管线的工作原理。

这门课程的核心价值在于填补「会用」与「懂原理」之间的gap。它并非简单罗列 API 用法，而是从 WebGL 的基础概念切入，逐步深入到 Three.js 的源码层面。对于想要从 2D 网页开发转向 3D 可视化、数据大屏、Web 游戏或虚拟展厅的前端开发者来说，这门课提供了一条从理论到实战的完整路径，帮助学习者建立系统的 3D 图形学知识体系，而不仅仅是掌握几个库的用法。

适合什么基础，建议先看哪几块

本课程适合有一定 JavaScript 基础，但对 3D 图形学陌生的初学者，或者已经使用过 Three.js 但希望深入理解底层原理的进阶者。如果你完全没接触过 Canvas 或前端动画，建议先补齐 JavaScript ES6+ 语法和基本的 Canvas 2D 绘图知识，再进入本课程学习会更顺畅。

学习顺序上，建议重点关注前期关于 WebGL 数学基础的部分，这是理解后续所有 3D 变换的基石。接着通过丰富的实例代码上手 Three.js 的基础对象构建，确保能独立搭建一个包含模型、光源和相机的场景。之后，深入讲解 Three.js 源码和 WebGL 渲染原理的章节是精华所在，这部分内容能帮助你将零散的知识点串联起来，形成对 3D 渲染流程的整体认知。资料包中配套的实例代码应跟随课程进度逐一遍历，不要跳过，因为很多细节只在代码中才能体现。

学完能独立做什么

完成课程学习并配合资料包练习后，你将具备独立开发中等复杂度 WebGL 应用的能力。具体而言，你可以使用 Three.js 构建交互式的 3D 产品展示页、数据可视化图表或简单的 Web 游戏场景。更重要的是，当遇到常规 API 无法满足的特殊视觉效果需求时，你能够通过理解渲染管线和编写自定义着色器来实现个性化效果，而不是依赖现成的插件或到处寻找答案。

在资料使用方面，建议将课程视频作为理论输入，资料包中的实例代码作为实操演练。每学完一个模块，尝试不依赖代码注释，独立复现案例效果，并尝试修改参数观察变化。遇到源码解析部分的内容，建议边看代码边对照视频讲解，必要时在本地搭建调试环境，逐步跟踪执行流程，这样才能真正将知识转化为自己的能力。

课程目录

├── 01-基础部分/ │ ├── [228M] 01-WebGL与three.js的基础、与opengl的关系.mp4
 │ ├── [686M] 02-编写第一个three.js程序.mp4
 │ ├── [317M] 03-three.js程序框架，绘制一条直线.mp4
 │ ├── [222M] 04-三维世界的组成(点、线).mp4
 │ ├── [162M] 05-坐标系的秘密（世界坐标、本地坐标）.mp4
 │ ├── [287M] 06-three.js让场景动起来的两种方法.mp4
 │ ├── [113M] 07-帧循环、游戏循环、渲染循环需要知道的深入意义.mp4
 │ ├── [215M] 08-three.js（WebGL）相机的工作原理，适用于任何一种3D编程方法.mp4
 │ ├── [537M] 09-正投影和透视投影相机的实践.mp4
 │ ├── [ 89M] 10-深入浅出WebGL中相机的三个向量参数.mp4
 │ ├── [275M] 13-光的初体验环境光.mp4
 │ ├── [512M] 14-光的初体验环境光2.mp4
 │ ├── [208M] 15-光的初体验点光源.mp4
 │ ├── [203M] 16-纹理一种让模型美丽的特殊技能.mp4
 │ ├── [435M] 17-纹理基础篇：three.js为物体加上皮肤，让世界还原真实.mp4
 │ ├── [405M] 18-纹理基础篇：纹理的重复与纹理的回环以及纹理偏移.mp4
 │ ├── [510M] 19-自定义绘制一个彩色三角形，了解geometry的结构.mp4
 │ ├── [230M] 20-geometry中face及face中的值的介绍.mp4
 │ ├── [213M] 21-三维模型的加载与显示基础.mp4
 │ ├── [499M] 22-模型的格式及模型的加载1.mp4
 │ ├── [283M] 23-模型的格式及模型的加载2.mp4
 │ ├── [362M] 24-VtkLoader的内部实现原理及three.js代码阅读方法.mp4
 │ ├── [470M] 25-Vtk模型格式及模型的解析.mp4
 │ ├── [321M] 26-VtkLoader源码中THREE.BufferGeometry的奥秘.mp4
 │ ├── [435M] 27-WebGL性能篇：高效的渲染几何体，如何保持高帧数.mp4
 │ ├── [327M] 28-WebGL性能篇：高效的渲染几何体，如何保持高帧数2.mp4
 │ ├── [376M] 29-WebGL性能篇：高效的绘制点数据-粒子系统初探.mp4
 │ ├── [261M] 30-WebGL模型篇：Obj模型1.mp4
 │ ├── [455M] 31-WebGL模型篇：OBJLoader详解.mp4
 │ ├── [128M] 32-WebGl模型篇：怎么给Obj模型赋予多个纹理.mp4
 │ ├── [ 68M] 33-WebGL模型篇：3D的精髓-Obj模型的格式详解.mp4
 │ ├── [166M] 34-WebGL模型篇：3D的精髓-Obj模型的格式详解之二.mp4
 │ ├── [301M] 35-WebGL模型篇：3D的精髓-自己动手解析OBJ模型.mp4
 │ ├── [381M] 36-WebGL模型篇：3D的精髓-自己动手解析OBJ模型之三.mp4
 │ ├── [424M] 37-WebGL视图篇：类似3Dmax的多视图显示(1).mp4
 │ ├── [424M] 37-WebGL视图篇：类似3Dmax的多视图显示.mp4
 │ ├── [353M] 38-拾取-如何通过鼠标选中物体1.mp4
 │ ├── [374M] 39-拾取-如何通过鼠标选中物体2.mp4
 │ ├── [325M] 40-让物体围绕一个特定点旋转.mp4
 │ ├── [357M] 41-物体的旋转方法和技巧2.mp4
 │ ├── [315M] 42-物体的旋转与技巧3.mp4
 │ ├── [349M] 43-物体的旋转与技巧4.mp4
 │ ├── [347M] 44-绚丽的粒子系统.mp4
 │ ├── [220M] 45-绚丽的粒子系统2.mp4
 │ ├── [466M] 46-绚丽的粒子系统：怎么由Geometry生成粒子系统3.mp4
 │ ├── [508M] 47-绚丽的粒子系统：生成多个粒子系统4.mp4
 │ ├── [710M] 48-绚丽的粒子系统：粒子的运动.mp4
 │ ├── [220M] 49-WebGL游戏篇：做一个酷毙的飞行游戏.mp4
 │ ├── [249M] 50-WebGL游戏篇：做一个酷毙的飞行游戏-游戏的架构设计.mp4
 │ ├── [439M] 51-WEBGL游戏篇：做一个酷毙的飞行游戏-地图的原理与实现.mp4
 │ ├── [523M] 52-WEBGL游戏篇：做一个酷毙的飞行游戏-地图上场景的生成.mp4
 │ ├── [270M] 53-WebGL游戏篇：做一个酷毙的飞行游戏-地图上建筑物生成.mp4
 │ ├── [363M] 54-WebGL游戏篇：做一个酷毙的飞行游戏-地图上建筑物生成二.mp4
 │ ├── [389M] 55-WebGL游戏篇：做一个酷毙的飞行游戏-控制飞机的飞行.mp4
 │ ├── [380M] 56-WebGL数学高级篇-揭秘WebGL中的数学知识和原理-贝塞尔曲线绘制.mp4
 │ ├── [428M] 57-WebGL数学高级篇：绘制三次贝塞尔曲线原理.mp4
 │ ├── [242M] 58-WebGL数学高级篇：获取贝塞尔曲线上的点的算法.mp4
 │ ├── [174M] 59-WebGL数学高级篇：向量的减法、数乘向量、交换律、结合律.mp4
 │ ├── [205M] 60-向量的数量积叉积的物理意义和应用1.mp4
 │ ├── [239M] 61-向量的数量积叉积的物理意义和应用2.mp4
 │ ├── [192M] 62-WebGL数学高级篇：图形学中的几种坐标系1.mp4
 │ ├── [220M] 63-WebGL数学高级篇-揭秘WebGL中的数学知识和原理-：矩阵运算.mp4
 │ ├── [144M] 64-衣服、布料等柔性材料的模拟1.mp4
 │ ├── [265M] 65-衣服、布料等柔性材料的模拟2.mp4
 │ ├── [131M] 66-衣服、布料等柔性材料的模拟3.mp4
 │ ├── [188M] 67-衣服、布料等柔性材料的模拟4.mp4
 │ ├── [204M] 68-衣服、布料等柔性材料的模拟5.mp4
 │ ├── [178M] 69-衣服、布料等柔性材料的模拟6.mp4
 │ ├── [191M] 70-衣服、布料等柔性材料的模拟7.mp4
 │ ├── [209M] 71-衣服、布料等柔性材料的模拟8.mp4
 │ ├── [250M] 72-WebGL视图篇：多视图显示，结合正投影和透视投影相机.mp4
 │ └── [110M] 73-第一人称射击游戏及源码，源码在附件下载、源码在附件下载.mp4
 ├── 02-WebGL第一人称射击游戏章节-源码在下一课附件/ │ ├── [ 51M] 74-游戏项目的搭建.mp4
 │ ├── [173M] 75-游戏项目的搭建之代码详解.mp4
 │ ├── [113M] 76-地图的构建.mp4
 │ ├── [228M] 77-复杂地图构建的思路详解.mp4
 │ ├── [ 23M] 78-加阴影的步骤及为什么有这些步骤.mp4
 │ ├── [ 50M] 79-阴影的接收面设置.mp4
 │ ├── [ 29M] 80-游戏的键盘控制.mp4
 │ ├── [ 85M] 81-通过键盘控制相机的摇摆拍摄.mp4
 │ ├── [104M] 82-模型phong材质详解.mp4
 │ ├── [ 85M] 83-phong材质代码实践.mp4
 │ ├── [103M] 84-法线贴图，将几百万三角形渲染降低到几百个的方法.mp4
 │ ├── [ 30M] 85-法线贴图，将几百万三角形渲染降低到几百个的方法（二）.mp4
 │ ├── [ 87M] 86-WebGL可以加载的模型类型.mp4
 │ ├── [ 67M] 87-遍历模型中的子模型，并实现多模型阴影.mp4
 │ ├── [ 71M] 88-加载更多的模型，调整代码结构.mp4
 │ ├── [146M] 89-设置枪的位置.mp4
 │ ├── [ 82M] 90-模拟人走动时的持枪的效果.mp4
 │ ├── [ 93M] 91-相机旋转时，枪怎么保证永远在相机前面.mp4
 │ ├── [ 65M] 92-子弹的原理.mp4
 │ └── [114M] 93-实现子弹的详细步骤.mp4
 ├── 03高级课程之：着色器详解/ │ ├── [ 59M] 100-着色器之一致变量、易变变量.mp4
 │ ├── [ 98M] 94-着色器可以做什么-代码下载、代码下载、代码下载见附件.mp4
 │ ├── [ 37M] 95-着色器与硬件相关的原理理解.mp4
 │ ├── [ 24M] 96-着色器CPU、GPU之间的关系.mp4
 │ ├── [ 66M] 97-着色器例子.mp4
 │ ├── [ 55M] 98-着色器代码编写详解.mp4
 │ └── [ 78M] 99-着色器之设备坐标系.mp4