这门课解决什么问题
如果你想让网页里出现可交互的 3D 场景——比如产品展示、数据可视化大屏、在线看房、3D 编辑器原型——那么绕不开 WebGL 和 Three.js。直接用原生 WebGL 写一个旋转立方体都要上百行代码，而 Three.js 把它封装成了 Scene、Camera、Mesh 这样相对好理解的组件。这门课正是围绕「用 Three.js 做出能上线的 Web3D 页面」来组织的。
它最大的特点是把镜头、光源、材质、几何体拆开讲，并且每一块都对应一个具体的视觉问题：为什么场景突然变暗？为什么物体看起来是平的？为什么相机看不到你想看的部分？这些在实际项目中几乎每天都会遇到。课程通过讲清楚每个组件的职责和参数，帮你建立调试思路，而不是只给一个能跑通的 demo。
适合什么基础
建议你至少会写 JavaScript，熟悉 ES6 的模块导入导出，了解 Canvas 的基本用法即可。不需要提前学过图形学，也不需要懂线性代数——课程里用到坐标、向量、矩阵的时候，会按 Three.js 的 API 来讲，不会推公式。但有一点要提醒：如果你对 JS 的异步、对象引用这些概念还比较模糊，建议先补一下基础，否则看到材质、纹理赋值时容易卡住。
如果你之前用过其他 3D 软件（比如 Blender、C4D）或者游戏引擎，会更容易理解场景、相机、灯光的语言体系，但这不是必须的。真正需要的是耐心：Three.js 的坑往往不在代码逻辑，而在参数组合之后产生的视觉效果，这类问题只能靠动手调参去积累经验。
先看哪几块，怎么配合练习
课程一共 18 章，核心顺序建议是：第一遍先按 1～6 章快速过一遍整体流程，知道「创建一个场景要哪几步」；然后立刻进入第 10 章组件、第 11 章光源、第 12 章材质、第 13 章几何体这几大块，它们就是 Three.js 的日常拼图。每一章里的组件都值得单独实验，尤其是相机（正射投影和透视投影的差异）、光（环境光与平行光组合的明暗关系）、材质（Phong 材质和着色器材质的取舍）。这些是后续做任何项目都要反复用的基础。
练习方法不要只听不敲。建议每看完一个小节，就在本地建一个最小页面，只放当前讲的组件，改参数并观察变化。比如看完光源类型，就把五种光都摆进去，看同一个物体在不同光下的差异；看完几何体，就试着用不同分段数生成同一个形状，看看顶点数和平滑度的关系。这个过程能帮你把「API 名词」变成「视觉记忆」。
学完能独立做什么
学完并完成课后练习后，你应该能独立实现一个完整的 Three.js 场景：包括场景搭建、相机控制、多光源布置、不同材质组合、加载外部模型，以及处理动画循环和简单的交互（如鼠标旋转、点击选中）。具体的产出可以是：一个产品的 360° 展示页、一个带 3D 柱状图的数据大屏、一个简单的室内漫游 demo，或者是某个机械设备的结构拆解演示。
更进一步，你也能看懂 Three.js 官方文档和示例代码，并且有能力把网上散落的代码片段改造成自己项目里能用的功能。这门课没有讲太深的自定义着色器，但学完材质章节后，你已经能理解着色器材质的使用前提，知道什么时候该去查 GLSL 资料，而不是对着黑屏毫无头绪。
最后补充一点：课程标题里有「实战」，但它更像「带案例的体系课」，不是项目打包课。如果你想直接学一个完整的「Three.js 3D 商城」或「大屏可视化」项目，这门课可能不够；但如果你想扎实掌握 Three.js 的核心概念，自己动手组合出想要的效果，它是足够系统的。
课程目录
WebGL+Three.js入门与实战，系统学习Web3D技术【完结18章】 {10}--第10章【Threejs组件】每个组件都有其独特的使用方法，可以 [10.1]--10-1基础组件-Scene .mp4
36.95M [10.2]--10-2基础组件-几何体 .mp4
11.67M [10.3]--10-3基础组件-正射投影相机 .mp4
14.70M [10.4]--10-4基础组件-透视投影相机 .mp4
9.28M {11}--第11章【Threejs光源】相信光，能照亮场景的每个角落，一个 [11.1]--11-1光源类型 .mp4
14.42M [11.2]--11-2聚光灯光源 .mp4
117.80M [11.3]--11-3环境光 .mp4
31.93M [11.4]--11-4点光源 .mp4
23.73M [11.5]--11-5平行光 .mp4
37.07M [11.6]--11-6半球光 .mp4
35.13M {12}--第12章【threejs材质】不同的材质能呈现出不同的效果，合适 [12.10]--12-10联合材质 .mp4
21.84M [12.1]--12-1材质简介 .mp4
29.71M [12.2]--12-2基础材质 .mp4
37.18M [12.3]--12-3深度材质 .mp4
32.18M [12.4]--12-4法向材质 .mp4
26.16M [12.5]--12-5面材质 .mp4
16.12M [12.6]--12-6郎伯材质 .mp4
29.13M [12.7]--12-7Phong材质 .mp4
27.09M [12.8]--12-8着色器材质 .mp4
42.33M {13}--第13章【Threejs几何体】还在为物体坐标烦恼吗？内置几何体 [13.10]--13-10多面体 .mp4
59.18M [13.11]--13-11文字 .mp4
56.47M [13.1]--13-1几何体简介 .mp4
7.74M [13.2]--13-2二维平面 .mp4
128.03M [13.3]--13-3二维圆 .mp4
56.66M [13.4]--13-4自定义二维图形 .mp4
21.58M [13.5]--13-5立方体 .mp4
38.30M [13.6]--13-6球体 .mp4
34.72M [13.7]--13-7圆柱体 .mp4
29.46M [13.8]--13-8圆环 .mp4
47.07M [13.9]--13-9纽结 .mp4
45.00M {14}--第14章【Threejs动画和相机】不同的角度看到的景色是不一样 [14.1]--14-1基础动画 .mp4
5.64M [14.3]--14-3点击选取对象 .mp4
68.04M [14.4]--14-4加载外部文件 .mp4
36.88M [14.5]--14-5使用相机控件 .mp4
62.24M [14.6]--14-6实战：实现骨骼动画 .mp4
185.56M {15}--第15章【Threejs纹理】场景不再单一，丰富多了 [15.1]--15-1基础纹理 .mp4
45.86M [15.2]--15-2凹凸贴图 .mp4
45.95M [15.3]--15-3法向贴图 .mp4
51.24M [15.4]--15-4环境贴图 .mp4
90.46M [15.5]--15-5canvas贴图 .mp4
35.15M [15.6]--15-6实战：实现辉光效果 .mp4
109.48M {16}--第16章【Threejs粒子】舞动的精灵，你值得拥有 [16.1]--16-1粒子和粒子系统 .mp4
55.45M [16.2]--16-2使用粒子实现水波效果 .mp4
82.11M [16.3]--16-3粒子组合成立方体 .mp4
108.73M {17}--第17章【智慧城市实战】基础内容怎么样了？来实战一下吧 [17.10]--17-10添加场景扫描线 .mp4
79.38M [17.11]--17-11特效：雷达效果 .mp4
91.55M [17.12]--17-12特效：透明墙 .mp4
99.29M [17.13]--17-13特效：地面扩散 .mp4
59.40M [17.14]--17-14特效：扩散半球 .mp4
36.36M [17.15]--17-15特效：旋转四棱锥 .mp4
61.14M [17.16]--17-16特效：飞线 .mp4
115.06M [17.17]--17-17特效：路径移动 .mp4
26.58M [17.18]--17-18场景文字添加 .mp4
64.20M [17.19]--17-19天气：冬雪 .mp4
148.17M [17.1]--17-1blender基础使用 .mp4
26.13M [17.20]--17-20天气：夏雨 .mp4
125.36M [17.21]--17-21跟随鼠标缩放 .mp4
61.14M [17.23]--17-23烟雾预警 .mp4
173.47M [17.2]--17-2通过blender创建城市模型 .mp4
63.52M [17.3]--17-3创建项目及场景添加 .mp4
116.35M [17.4]--17-4加载城市模型 .mp4
130.83M [17.5]--17-5背景天空盒 .mp4
45.74M [17.6]--17-6添加交互效果 .mp4
79.35M [17.7]--17-7给建筑物添加渐变色 .mp4
75.66M [17.8]--17-8创建建筑物外围线条 .mp4
48.64M [17.9]--17-9添加建筑物扫描线 .mp4
60.78M {18}--第18章番外篇：webgl里的数学 [18.10]--18-10番外10旋转矩阵 .mp4
8.47M [18.1]--18-1番外1三角函数 .mp4
31.38M [18.2]--18-2番外2向量乘以标量 .mp4
22.46M [18.3]--18-3番外3向量长度计算 .mp4
9.50M [18.4]--18-4番外4两个向量的距离 .mp4
47.63M [18.5]--18-5番外5归一化 .mp4
8.74M [18.6]--18-6番外6点积 .mp4
41.72M [18.7]--18-7番外7叉积 .mp4
51.19M [18.8]--18-8番外8向量运算 .mp4
28.82M [18.9]--18-9番外9矩阵运算 .mp4
65.16M {1}--第1章课程开篇 [1.1]--1-1课程导学 .mp4
44.95M [1.2]--1-2课程简介 .mp4
22.39M {2}--第2章WebGL简单应用：学习WebGL简单使用，建立WebGL [2.1]--2-1canvas和webgl的区别 .mp4
21.03M [2.2]--2-2认识webgl，了解webgl .mp4
77.96M [2.3]--2-3webgl入门-给画布换个颜色 .mp4
56.93M [2.4]--2-4绘制一个点 .mp4
226.54M [2.5]--2-5介绍webgl三维坐标系 .mp4
63.06M [2.6]--2-6学习使用attribute变量-绘制一个水平移动的点 .mp4
88.20M [2.7]--2-7通过鼠标控制绘制 .mp4
95.86M [2.8]--2-8使用uniform变量-绘制不同颜色的点 .mp4
83.41M {3}--第3章WebGL多图形绘制和动画 [3.10]--3-10图形复合变换-矩阵组合 .mp4
78.60M [3.1]--3-1使用缓冲区对象-绘制多个点 .mp4
88.58M [3.2]--3-2多缓冲区和数据偏移 .mp4
49.71M [3.3]--3-3实现多种图形绘制 .mp4
50.31M [3.4]--3-4图形平移-着色器 .mp4
27.62M [3.5]--3-5图形缩放-着色器 .mp4
13.16M [3.6]--3-6图形旋转-着色器 .mp4
33.25M [3.7]--3-7图形平移-平移矩阵 .mp4
114.36M [3.8]--3-8图形缩放-缩放矩阵 .mp4
43.31M [3.9]--3-9图形旋转-旋转矩阵 .mp4
91.63M {4}--第4章WebGL颜色和纹理 [4.1]--4-1使用varying变量-绘制彩色三角形 .mp4
28.15M [4.2]--4-2从顶点到图形–webgl渲染流程介绍 .mp4
14.95M [4.3]--4-3给图形添加背景图 .mp4
154.77M [4.4]--4-4使用多重纹理 .mp4
56.12M {5}--第5章WebGL原理学习：OpenGLES语言 [5.1]--5-1OpenGLES语言基础 .mp4
47.60M [5.2]--5-2矢量和矩阵 .mp4
18.88M [5.3]--5-3纹理取样器 .mp4
18.37M [5.4]--5-4分支和循环 .mp4
9.27M [5.5]--5-5函数 .mp4
18.55M [5.6]--5-6内置函数介绍 .mp4
15.84M [5.7]--5-7存储限定词 .mp4
20.30M {6}--第6章WebGL三维世界 [6.1]--6-13D基础 .mp4
136.57M [6.2]--6-2正射投影 .mp4
88.72M [6.3]--6-3透视投影 .mp4
166.86M [6.4]--6-4立方体绘制（顶点法） .mp4
81.76M [6.5]--6-5立方体绘制（索引法） .mp4
80.16M {7}--第7章webgl光照 [7.1]--7-1光是如何使用的 .mp4
35.89M [7.2]--7-2给场景添加光源 .mp4
72.04M {8}--第8章WebGL进阶操作 [8.1]--8-1雾化 .mp4
103.20M [8.2]--8-2绘制圆形的点 .mp4
32.98M [8.3]--8-3绘制半透明物体 .mp4
19.53M {9}--第9章【Threejs基础】简单实现一些阴影、雾化的效果 [9.1]--9-1什么是threejs .mp4
19.62M [9.2]--9-2渲染三维对象 .mp4
79.19M [9.4]--9-4添加阴影效果 .mp4
55.56M [9.5]--9-5添加雾化效果 .mp4
24.10M 课件 .zip
22.02M [10.1]--10-1基础组件-S.mp4
