从 API 调用到源码透视

许多开发者在使用 Three.js 时，往往局限于调用现成的 API 实现基础渲染，一旦涉及性能优化、自定义着色器或底层逻辑调试，便容易陷入困境。这门课的核心价值在于打通 WebGL 原生技术与 Three.js 引擎源码之间的认知壁垒。它不是简单的语法罗列，而是深入解析 3D 渲染管线、场景图结构以及 GPU 工作原理的系统性梳理。对于希望突破“只会调参”瓶颈，真正理解 3D 计算机图形学在 Web 端落地机制的工程师而言，这是补齐底层逻辑的关键环节。课程特别强调从原理出发的实践方法，帮助你建立对渲染过程的直观物理认知，从而在面对复杂图形需求时，能够做出更合理的技术选型与架构设计。

前置门槛与学习顺序建议

在开始学习前，必须确认自己具备扎实的 JavaScript 基础，并熟悉 ES6 及以上语法规范。更重要的是，线性代数中的向量运算、矩阵变换以及四元数概念是理解 3D 空间变换的基石，若这部分知识薄弱，建议先花两周时间复习数学基础，否则在接触源码时极易产生挫败感。学习路径上，不建议线性通读，而应分阶段攻克：首先掌握 WebGL 核心概念，重点理解着色器语言与渲染管线；接着深入 Three.js 的核心类体系，剖析 Object3D、Camera 与 Scene 的协作机制；最后结合具体实例，分析源码中的关键实现细节。请警惕直接跳入高难度源码分析，务必在理解基础 API 原理后再逐步深入，保持由浅入深的节奏感。

产出能力与资料配合策略

完成这门课程后，你应具备独立构建和优化复杂 3D 场景的能力，不仅能实现视觉效果，更能识别并解决 Draw Call 过多、内存泄漏等常见性能陷阱。更重要的是，你能够读懂部分核心源码，并具备从零搭建简易渲染器的潜力，这是区分普通前端开发与图形底层专家的关键分水岭。配套资料包中的实例代码是核心练习素材，切忌仅做观看。建议采用“逆向工程”式的练习方法：先运行示例观察效果，然后手动修改参数验证渲染结果，最后尝试删除部分封装逻辑，用原生 WebGL 接口重写核心功能。这种“源码阅读加代码重构”的配合方式，能强制你将理论转化为肌肉记忆，确保在脱离教程后，依然具备独立解决未知图形问题的能力。

课程介绍

本课程来自网易微专业，（高清完结版），是一门WebGL\Three.js深度学习课程。本课程适合那些对WebGL、Three.js等3D技术感兴趣，却不知道如何入门的同学。课程由丰富经验的大厂工程师为您从WebGL、Three.js基础知识详解开始，课堂简单易懂，内容拥有丰富的实例代码配套资源，逐步深入Three.js源码，帮助大家深入理解WebGL的原理，理解3D重要概念及原理。

课程目录

├── 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