[622] WebGL+Three.js 入门与实战，系统学习 Web3D 技术非常适合前端工程师的新兴技术与职业方向

网盘链接：

1. 课程开篇

• 1-1 课程导学
• 1-2 课程简介

2. WebGL 简单应用：学习 WebGL 简单使用，建立 WebGL 认知

• 2-1 canvas 和 webgl 的区别
• 2-2 认识 webgl，了解 webgl
• 2-3 webgl 入门 – 给画布换个颜色
• 2-4 绘制一个点
• 2-5 介绍 webgl 三维坐标系
• 2-6 学习使用 attribute 变量-绘制一个水平移动的点
• 2-7 通过鼠标控制绘制
• 2-8 使用 uniform 变量 – 绘制不同颜色的点
• 2-9 实战：实现一个贪吃蛇小游戏

3. WebGL 多图形绘制和动画

• 3-1 使用缓冲区对象 – 绘制多个点
• 3-2 多缓冲区和数据偏移
• 3-3 实现多种图形绘制
• 3-4 图形平移 – 着色器
• 3-5 图形缩放 – 着色器
• 3-6 图形旋转 – 着色器
• 3-7 图形平移 – 平移矩阵
• 3-8 图形缩放 – 缩放矩阵
• 3-9 图形旋转 – 旋转矩阵
• 3-10 图形复合变换 – 矩阵组合
• 3-11 实战：实现动态入场效果

4. WebGL 颜色和纹理

• 4-1 使用 varying 变量 – 绘制彩色三角形
• 4-2 从顶点到图形 – webgl 渲染流程介绍
• 4-3 给图形添加背景图
• 4-4 使用多重纹理
• 4-5 实战：实现基于 webgl 的放大镜

5. WebGL原理学习：OpenGL ES 语言

• 5-1 OpenGL ES 语言基础
• 5-2 矢量和矩阵
• 5-3 纹理取样器
• 5-4 分支和循环
• 5-5 函数
• 5-6 内置函数介绍
• 5-7 存储限定词
• 5-8 实战：实现 webgl 小球融合

6. WebGL 三维世界

• 6-1 3D 基础
• 6-2 正射投影
• 6-3 透视投影
• 6-4 立方体绘制（顶点法）
• 6-5 立方体绘制（索引法）
• 6-6 实战：实现图形圆角

7. webgl 光照

• 7-1 光是如何使用的
• 7-2 给场景添加光源

8. WebGL 进阶操作

• 8-1 雾化
• 8-2 绘制圆形的点
• 8-3 绘制半透明物体

9. 【Threejs 基础】简单实现一些阴影、雾化的效果

• 9-1 什么是 threejs
• 9-2 渲染三维对象
• 9-3 场景添加灯光
• 9-4 添加阴影效果
• 9-5 添加雾化效果

10. 【Threejs 组件】每个组件都有其独特的使用方法，可以做特定的设置

• 10-1 基础组件 – Scene
• 10-2 基础组件 – 几何体
• 10-3 基础组件 – 正射投影相机
• 10-4 基础组件 – 透视投影相机

11. 【Threejs 光源】相信光，能照亮场景的每个角落，一个不够？再来几个吧。

• 11-1 光源类型
• 11-2 聚光灯光源
• 11-3 环境光
• 11-4 点光源
• 11-5 平行光
• 11-6 半球光

12. 【threejs 材质】不同的材质能呈现出不同的效果，合适最重要

• 12-1 材质简介
• 12-2 基础材质
• 12-3 深度材质
• 12-4 法向材质
• 12-5 面材质
• 12-6 郎伯材质
• 12-7 Phong 材质
• 12-8 着色器材质
• 12-9 直线和虚线
• 12-10 联合材质

13. 【Threejs 几何体】还在为物体坐标烦恼吗？内置几何体来了

• 13-1 几何体简介
• 13-2 二维平面
• 13-3 二维圆
• 13-4 自定义二维图形
• 13-5 立方体
• 13-6 球体
• 13-7 圆柱体
• 13-8 圆环
• 13-9 纽结
• 13-10 多面体
• 13-11 文字

14. 【Threejs 动画和相机】不同的角度看到的景色是不一样的，从多角度来观察吧

• 14-1 基础动画
• 14-2 通过 Tween 实现动画
• 14-3 点击选取对象
• 14-4 加载外部文件
• 14-5 使用相机控件
• 14-6 实战：实现骨骼动画

15. 【Threejs 纹理】场景不再单一，丰富多了

• 15-1 基础纹理
• 15-2 凹凸贴图
• 15-3 法向贴图
• 15-4 环境贴图
• 15-5 canvas贴图
• 15-6 实战：实现辉光效果

16. 【Threejs 粒子】舞动的精灵，你值得拥有

• 16-1 粒子和粒子系统
• 16-2 使用粒子实现水波效果
• 16-3 粒子组合成立方体
• 16-4 图片粒子化

17. 【智慧城市实战】基础内容怎么样了？来实战一下吧

• 17-1 blender基础使用
• 17-2 通过blender创建城市模型
• 17-3 创建项目及场景添加
• 17-4 加载城市模型
• 17-5 背景天空盒
• 17-6 添加交互效果
• 17-7 给建筑物添加渐变色
• 17-8 创建建筑物外围线条
• 17-9 添加建筑物扫描线
• 17-10 添加场景扫描线
• 17-11 特效：雷达效果
• 17-12 特效：透明墙
• 17-13 特效：地面扩散
• 17-14 特效：扩散半球
• 17-15 特效：旋转四棱锥
• 17-16 特效：飞线
• 17-17 特效：路径移动
• 17-18 场景文字添加
• 17-19 天气：冬雪
• 17-20 天气：夏雨
• 17-21 跟随鼠标缩放
• 17-22 建筑物生长
• 17-23 烟雾预警

18. 番外篇：webgl里的数学

• 18-1 番外 1 三角函数
• 18-2 番外 2 向量乘以标量
• 18-3 番外 3 向量长度计算
• 18-4 番外 4 两个向量的距离
• 18-5 番外 5 归一化
• 18-6 番外 6 点积
• 18-7 番外 7 叉积
• 18-8 番外 8 向量运算
• 18-9 番外 9 矩阵运算
• 18-10 番外 10 旋转矩阵