课程是一套专为希望深入 Web3D 图形开发领域的工程师和开发者量身打造的系统性实战教程。课程以”WebGL 底层渲染→着色器编程→三维数学基础→Three.js 框架应用→智慧城市综合实战”为核心路径，系统性地串联起从 Canvas 与 WebGL 的区别、顶点着色器与片段着色器编写、缓冲区对象与多图形绘制，到三维坐标系、投影变换、光照模型、雾化与半透明渲染等 WebGL 核心原理，再过渡到 Three.js 框架的场景、相机、光源、材质、几何体、纹理、粒子系统等高级特性，最终以 Blender 建模驱动的智慧城市项目为实战载体，实现从底层图形学到上层框架应用的全链路技术贯通。你将不仅掌握 Web3D 开发的核心技术，更能具备独立设计并落地 3D 可视化项目的工程能力。
核心学习路径
1. 课程导论（第1章）
了解课程整体架构与学习路线，明确 Web3D 技术的学习目标与方向。
2. WebGL 基础入门（第2章）
Canvas 与 WebGL：理解 Canvas 2D 与 WebGL 的本质区别，建立 WebGL 开发认知。
着色器基础：学习 attribute 变量绘制移动点、uniform 变量绘制彩色点，掌握鼠标交互控制绘制。
三维坐标系：建立 WebGL 三维坐标空间概念，为后续 3D 开发奠定基础。
3. WebGL 多图形绘制与动画（第3章）
缓冲区对象：掌握缓冲区对象的使用、多缓冲区与数据偏移技术，实现多种图形的批量绘制。
图形变换：深入学习图形缩放（着色器实现）、旋转（旋转矩阵）、平移（平移矩阵）及矩阵组合复合变换，掌握 3D 图形变换的核心数学工具。
4. WebGL 颜色与纹理（第4章）
颜色传递：通过 varying 变量实现顶点到片元的颜色插值，绘制彩色三角形。
渲染流程：理解从顶点到图形的完整 WebGL 渲染管线。
纹理技术：学习给图形添加背景图及使用多重纹理，丰富场景视觉效果。
5. OpenGL ES 着色器语言（第5章）
语言基础：系统学习 OpenGL ES 着色器语法，包括变量类型、分支与循环、函数定义。
数学基础：掌握向量与矩阵运算，理解纹理取样器的使用。
存储限定词：深入 attribute/uniform/varying 等存储限定词的作用域与生命周期。
6. WebGL 三维世界（第6章）
3D 基础：理解三维渲染的基本概念与坐标空间变换。
投影技术：掌握正射投影与透视投影的原理与实现，理解相机成像模型。
立方体绘制：分别通过顶点法与索引法实现立方体的 3D 绘制，理解索引缓冲的优化价值。
7. WebGL 光照与高级渲染（第7-8章）
光照系统：学习光源的使用方式，为场景添加真实光照效果。
高级效果：掌握雾化效果、圆形点绘制、半透明物体渲染等进阶渲染技术。
8. Three.js 基础入门（第9章）
框架认知：了解 Three.js 框架的设计思想与核心架构。
快速上手：实现三维对象渲染、场景灯光添加、阴影效果与雾化效果，快速建立 Three.js 开发信心。
9. Three.js 核心组件（第10章）
场景（Scene）：掌握场景的创建与管理，理解场景图（Scene Graph）的层级结构。
几何体（Geometry）：学习 Three.js 内置几何体的使用方式。
相机系统：深入正射投影相机与透视投影相机的原理与适用场景，掌握相机的参数配置。
10. Three.js 光源系统（第11章）
光源类型：系统学习聚光灯、环境光、点光源、平行光、半球光等六大光源的特性与使用场景，理解”相信光”的渲染哲学。
11. Three.js 材质系统（第12章）
材质精讲：深入基础材质、深度材质、法向材质、面材质、郎伯材质、Phong 材质、着色器材质、联合材质等八种材质的原理与视觉效果，掌握”合适材质呈现合适效果”的渲染技巧。
12. Three.js 几何体大全（第13章）
二维几何体：掌握二维平面、二维圆、自定义二维图形的创建方法。
三维几何体：深入学习立方体、球体、圆柱体、圆环、纽结等内置几何体，以及多面体的创建技巧。
文字几何体：学习 Three.js 中文字体的加载与文字几何体的生成。
13. Three.js 动画与交互（第14章）
基础动画：掌握 Three.js 动画循环机制与关键帧动画。
交互控制：学习点击选取对象（射线检测）、加载外部 3D 模型文件、使用相机控件实现自由视角漫游。
骨骼动画：通过实战案例实现角色骨骼动画的加载与播放。
14. Three.js 纹理进阶（第15章）
纹理类型：系统学习基础纹理、凹凸贴图、法向贴图、环境贴图、Canvas 动态贴图的使用方式。
特效实战：通过实战实现辉光效果，掌握后处理特效的基本思路。
15. Three.js 粒子系统（第16章）
粒子基础：理解粒子与粒子系统的概念，掌握 Three.js 粒子系统的创建与渲染。
粒子特效：通过粒子实现水波效果、粒子组合成立方体等创意视觉效果。
16. 智慧城市综合实战（第17章）
Blender 建模：学习 Blender 基础操作，通过 Blender 创建城市 3D 模型。
项目搭建：创建 Three.js 项目，加载城市模型，配置背景天空盒。
建筑特效：为建筑物添加渐变色、创建外围线条、添加扫描线效果。
场景交互：实现鼠标跟随缩放、场景文字添加等交互功能。
视觉特效：实现雷达效果、透明墙、地面扩散、扩散半球、旋转四棱锥、飞线、路径移动等多种动态特效。
天气系统：实现冬雪、夏雨等天气效果，以及烟雾预警功能。
17. WebGL 数学番外篇（第18章）
三角函数：复习 Web3D 中常用的三角函数知识。
向量运算：掌握向量乘以标量、向量长度计算、向量间距离、归一化、点积、叉积等核心向量运算。
矩阵运算：深入学习矩阵运算在 3D 变换中的应用，补齐 3D 开发的数学基础。
课程亮点
从底层到框架，层层递进：先深入 WebGL 底层渲染管线与着色器编程，再过渡到 Three.js 框架应用，建立扎实的图形学基础。
数学与代码并重：专门设置 WebGL 数学番外篇，系统补齐向量、矩阵等 3D 开发必备数学知识。
OpenGL ES 着色器语言：从 GLSL 语法讲起，让你真正理解 3D 渲染的底层逻辑。
智慧城市综合实战：以 Blender 建模 + Three.js 开发为技术栈，完成一个包含建筑特效、天气系统、交互控制的完整 3D 可视化项目。
特效丰富，视觉冲击：涵盖辉光、粒子水波、扫描线、雷达、飞线、天气等大量视觉特效实战。
配套资料齐全：提供智慧城市项目源码与 PPT 课件，方便课后复习与项目复用。
课程目录：
Web3D技术
+—{10}–第10章【Threejs组件】每个组件都有其独特的使用方法，可以
| [10.1]–10-1基础组件-Scene.mp4
| [10.2]–10-2基础组件-几何体.mp4
| [10.3]–10-3基础组件-正射投影相机.mp4
| [10.4]–10-4基础组件-透视投影相机.mp4
|
+—{11}–第11章【Threejs光源】相信光，能照亮场景的每个角落，一个
| [11.1]–11-1光源类型.mp4
| [11.2]–11-2聚光灯光源.mp4
| [11.3]–11-3环境光.mp4
| [11.4]–11-4点光源.mp4
| [11.5]–11-5平行光.mp4
| [11.6]–11-6半球光.mp4
|
+—{12}–第12章【threejs材质】不同的材质能呈现出不同的效果，合适
| [12.10]–12-10联合材质.mp4
| [12.1]–12-1材质简介.mp4
| [12.2]–12-2基础材质.mp4
| [12.3]–12-3深度材质.mp4
| [12.4]–12-4法向材质.mp4
| [12.5]–12-5面材质.mp4
| [12.6]–12-6郎伯材质.mp4
| [12.7]–12-7Phong材质.mp4
| [12.8]–12-8着色器材质.mp4
|
+—{13}–第13章【Threejs几何体】还在为物体坐标烦恼吗？内置几何体
| [13.10]–13-10多面体.mp4
| [13.11]–13-11文字.mp4
| [13.1]–13-1几何体简介.mp4
| [13.2]–13-2二维平面.mp4
| [13.3]–13-3二维圆.mp4
| [13.4]–13-4自定义二维图形.mp4
| [13.5]–13-5立方体.mp4
| [13.6]–13-6球体.mp4
| [13.7]–13-7圆柱体.mp4
| [13.8]–13-8圆环.mp4
| [13.9]–13-9纽结.mp4
|
+—{14}–第14章【Threejs动画和相机】不同的角度看到的景色是不一样
| [14.1]–14-1基础动画.mp4
| [14.3]–14-3点击选取对象.mp4
| [14.4]–14-4加载外部文件.mp4
| [14.5]–14-5使用相机控件.mp4
| [14.6]–14-6实战：实现骨骼动画.mp4
|
+—{15}–第15章【Threejs纹理】场景不再单一，丰富多了
| [15.1]–15-1基础纹理.mp4
| [15.2]–15-2凹凸贴图.mp4
| [15.3]–15-3法向贴图.mp4
| [15.4]–15-4环境贴图.mp4
| [15.5]–15-5canvas贴图.mp4
| [15.6]–15-6实战：实现辉光效果.mp4
|
+—{16}–第16章【Threejs粒子】舞动的精灵，你值得拥有
| [16.1]–16-1粒子和粒子系统.mp4
| [16.2]–16-2使用粒子实现水波效果.mp4
| [16.3]–16-3粒子组合成立方体.mp4
|
+—{17}–第17章【智慧城市实战】基础内容怎么样了？来实战一下吧
| [17.10]–17-10添加场景扫描线.mp4
| [17.11]–17-11特效：雷达效果.mp4
| [17.12]–17-12特效：透明墙.mp4
| [17.13]–17-13特效：地面扩散.mp4
| [17.14]–17-14特效：扩散半球.mp4
| [17.15]–17-15特效：旋转四棱锥.mp4
| [17.16]–17-16特效：飞线.mp4
| [17.17]–17-17特效：路径移动.mp4
| [17.18]–17-18场景文字添加.mp4
| [17.19]–17-19天气：冬雪.mp4
| [17.1]–17-1blender基础使用.mp4
| [17.20]–17-20天气：夏雨.mp4
| [17.21]–17-21跟随鼠标缩放.mp4
| [17.23]–17-23烟雾预警.mp4
| [17.2]–17-2通过blender创建城市模型.mp4
| [17.3]–17-3创建项目及场景添加.mp4
| [17.4]–17-4加载城市模型.mp4
| [17.5]–17-5背景天空盒.mp4
| [17.6]–17-6添加交互效果.mp4
| [17.7]–17-7给建筑物添加渐变色.mp4
| [17.8]–17-8创建建筑物外围线条.mp4
| [17.9]–17-9添加建筑物扫描线.mp4
|
+—{18}–第18章番外篇：webgl里的数学
| [18.10]–18-10番外10旋转矩阵.mp4
| [18.1]–18-1番外1三角函数.mp4
| [18.2]–18-2番外2向量乘以标量.mp4
| [18.3]–18-3番外3向量长度计算.mp4
| [18.4]–18-4番外4两个向量的距离.mp4
| [18.5]–18-5番外5归一化.mp4
| [18.6]–18-6番外6点积.mp4
| [18.7]–18-7番外7叉积.mp4
| [18.8]–18-8番外8向量运算.mp4
| [18.9]–18-9番外9矩阵运算.mp4
|
+—{1}–第1章课程开篇
| [1.1]–1-1课程导学.mp4
| [1.2]–1-2课程简介.mp4
|
+—{2}–第2章WebGL简单应用：学习WebGL简单使用，建立WebGL
| [2.1]–2-1canvas和webgl的区别.mp4
| [2.2]–2-2认识webgl，了解webgl.mp4
| [2.3]–2-3webgl入门-给画布换个颜色.mp4
| [2.4]–2-4绘制一个点.mp4
| [2.5]–2-5介绍webgl三维坐标系.mp4
| [2.6]–2-6学习使用attribute变量-绘制一个水平移动的点.mp4
| [2.7]–2-7通过鼠标控制绘制.mp4
| [2.8]–2-8使用uniform变量-绘制不同颜色的点.mp4
|
+—{3}–第3章WebGL多图形绘制和动画
| [3.10]–3-10图形复合变换-矩阵组合.mp4
| [3.1]–3-1使用缓冲区对象-绘制多个点.mp4
| [3.2]–3-2多缓冲区和数据偏移.mp4
| [3.3]–3-3实现多种图形绘制.mp4
| [3.5]–3-5图形缩放-着色器.mp4
| [3.6]–3-6图形旋转-着色器.mp4
| [3.7]–3-7图形平移-平移矩阵.mp4
| [3.8]–3-8图形缩放-缩放矩阵.mp4
| [3.9]–3-9图形旋转-旋转矩阵.mp4
|
+—{4}–第4章WebGL颜色和纹理
| [4.1]–4-1使用varying变量-绘制彩色三角形.mp4
| [4.2]–4-2从顶点到图形–webgl渲染流程介绍.mp4
| [4.3]–4-3给图形添加背景图.mp4
| [4.4]–4-4使用多重纹理.mp4
|
+—{5}–第5章WebGL原理学习：OpenGLES语言
| [5.1]–5-1OpenGLES语言基础.mp4
| [5.2]–5-2矢量和矩阵.mp4
| [5.3]–5-3纹理取样器.mp4
| [5.4]–5-4分支和循环.mp4
| [5.5]–5-5函数.mp4
| [5.7]–5-7存储限定词.mp4
|
+—{6}–第6章WebGL三维世界
| [6.1]–6-13D基础.mp4
| [6.2]–6-2正射投影.mp4
| [6.3]–6-3透视投影.mp4
| [6.4]–6-4立方体绘制（顶点法）.mp4
| [6.5]–6-5立方体绘制（索引法）.mp4
|
+—{7}–第7章webgl光照iclass=new_tagi
| [7.1]–7-1光是如何使用的.mp4
| [7.2]–7-2给场景添加光源.mp4
|
+—{8}–第8章WebGL进阶操作iclass=new_tagi
| [8.1]–8-1雾化.mp4
| [8.2]–8-2绘制圆形的点.mp4
| [8.3]–8-3绘制半透明物体.mp4
|
+—{9}–第9章【Threejs基础】简单实现一些阴影、雾化的效果icla
| [9.1]–9-1什么是threejs.mp4
| [9.2]–9-2渲染三维对象.mp4
| [9.3]–9-3场景添加灯光.mp4
| [9.4]–9-4添加阴影效果.mp4
| [9.5]–9-5添加雾化效果.mp4
|
\—资料
city-real-time-master.zip
city_ppt-master.zip
下载地址：
感谢您的来访，获取更多精彩文章请收藏本站。
