为什么 WebGL 对你来说是道坎？

很多人做前端，canvas 玩得挺溜，但一提到 Three.js 就发懵。根本原因不是 JS 不会写，而是**“3D 思维”**没建立起来。在二维世界里，我们习惯坐标 (x, y)；到了三维，突然多了 z 轴，还要理解相机怎么“看”、光从哪里来、物体表面材质怎么反射光线。这些概念如果只靠文档啃，很容易陷入“API 看了很多，但屏幕上还是黑乎乎一片”的困境。

这门课解决的正是这个**“从 2D 开发者到 3D 场景搭建者”**的能力断层。它不教你高深的图形学数学推导，而是把 Three.js 中最核心、最常用的三大支柱——**场景组件、光源系统、材质表现**——拆解成可复现的实例。对于想补全 Web 可视化技能树、或者准备面试中涉及 3D 展示岗位的学习者来说，这是绕过枯燥数学、直接上手工程实践的一条捷径。

建议先看哪几块？怎么配合练习？

不要从头死磕 18 章，建议按以下顺序建立直观认知：

1. **先搞懂“舞台”（第 10 章）**：Scene、几何体、正射/透视相机是 Three.js 的骨架。重点理解**透视投影**带来的近大远小效果，以及相机位置与观察目标的关系。这部分练不好，后续模型位置永远对不上。
2. **再玩透“光与影”（第 11 章）**：光源是 3D 真实感的来源。务必亲手调节**聚光灯、平行光、点光源**的不同参数，观察阴影变化。特别是聚光灯的锥角和距离，直接影响场景氛围。
3. **最后攻“材质”（第 12 章）**：这是最容易踩坑的地方。从基础的 `MeshBasicMaterial` 到受光照影响的 `MeshPhongMaterial`、`MeshLambertMaterial`，再到高级的着色器材质。**关键练习**是：同一个几何体，切换不同材质，观察它们对光源的反应差异——这正是区分“平面的彩色块”和“立体的真实物体”的核心。

每章视频后，务必**手动敲一遍代码**，并尝试修改参数（如改变光源颜色、调整几何体顶点数），观察屏幕反馈。不要只看不练，3D 编程的直觉全靠“试错”练出来。

学完能独立做什么？

完成本课程并充分练习后，你将能够：

- **独立搭建 Three.js 基础场景**：配置相机、渲染器、场景，并控制视角动画。
- **创建和组合复杂几何体**：使用内置几何体或合并算法构建简单 3D 模型。
- **实现多光源照明系统**：合理搭配环境光、方向光、聚光灯，营造特定场景氛围（如室内、夜景）。
- **应用多样化材质表现**：根据需求选择合适材质，实现金属、塑料、发光等不同视觉效果。
- **排查常见 3D 渲染问题**：如物体消失（相机裁切面问题）、黑屏（光源缺失或材质不支持光照）等。

这门课适合**已有 JavaScript 基础、熟悉 DOM 操作**的前端开发者或初学者。无需高等数学背景，只需保持动手欲望。当你能够用一个场景讲述一个视觉故事时，你就真正掌握了 Web 3D 的入门钥匙。

课程目录

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