WebGL+Three.js 入门与实战，系统学习 Web3D 技术|完结无秘

随着元宇宙、数字孪生的火热，前端3D可视化需求越来越广泛，懂 WebGL 技术的前端人才也成为行业香饽饽，薪资诱人颇有竞争力。本课程系统组织了WebGL 和 Three.js 知识内容，并结合图形学相关的数学知识，带你从0基础入门，体系化学习它们的基本、进阶、高级用法。最终通过一款高质量的 3D 可视化项目-智慧城市，让你顺利将 WebGL 和 Three.js 技术落地，掌握其实际应用。

<mksz622-WebGL+Three.js入门与实战，系统学习Web3D技术【完结18章】>
├<{1}–第1章课程开篇>
│ ├[1.1]–1-1课程导学.mp4
│ └[1.2]–1-2课程简介.mp4
├<{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.1]–12-1材质简介.mp4
│ ├[12.10]–12-10联合材质.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.1]–13-1几何体简介.mp4
│ ├[13.10]–13-10多面体.mp4
│ ├[13.11]–13-11文字.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.1]–17-1blender基础使用.mp4
│ ├[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.2]–17-2通过blender创建城市模型.mp4
│ ├[17.20]–17-20天气：夏雨.mp4
│ ├[17.21]–17-21跟随鼠标缩放.mp4
│ ├[17.23]–17-23烟雾预警.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.1]–18-1番外1三角函数.mp4
│ ├[18.10]–18-10番外10旋转矩阵.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
├<{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.1]–3-1使用缓冲区对象-绘制多个点.mp4
│ ├[3.10]–3-10图形复合变换-矩阵组合.mp4
│ ├[3.2]–3-2多缓冲区和数据偏移.mp4
│ ├[3.3]–3-3实现多种图形绘制.mp4
│ ├[3.4]–3-4图形平移-着涩器.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从顶点到图形&ndash;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.6]–5-6内置函数介绍.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光照>
│ ├[7.1]–7-1光是如何使用的.mp4
│ └[7.2]–7-2给场景添加光源.mp4
├<{8}–第8章WebGL进阶操作>
│ ├[8.1]–8-1雾化.mp4
│ ├[8.2]–8-2绘制圆形的点.mp4
│ └[8.3]–8-3绘制半透明物体.mp4
├<{9}–第9章【Threejs基础】简单实现一些阴影、雾化的效果>
│ ├[9.1]–9-1什么是threejs.mp4
│ ├[9.2]–9-2渲染三维对象.mp4
│ ├[9.4]–9-4添加阴影效果.mp4
│ └[9.5]–9-5添加雾化效果.mp4
├<课件>
│ ├city_ppt-master.zip
│ └city-real-time-master.zip