| WebGL 基础巩固：主要全面巩固WebGL 基础内容，全面梳理WebGL基础知识点，Three.js是基于WebGl API的封装，全面了解WebGL有助于更好的理解Threejs各项API背后逻辑和基本概念。 |
| 目标： 掌握前端开发重点内容，熟悉WebGL基本原理 |
1. 前端基础
2.WebGL 基础
- WebGL 基本原理
- WebGL 是如何工作的
- WebGL 着色器和 GLSL
3.图像处理：
4.2D 转换、旋转、伸缩、矩阵
- WebGL 2D 图像转换
- WebGL 2D 图像旋转
- WebGL 2D 图像伸缩
- WebGL 2D 矩阵
|
| 目标： 熟悉WebGL基本原理，尝试动手完成一个WebGL项目 |
1. 3D
- WebGL 3D 正交
- WebGL 3D 透视
- WebGL 3D 摄像机
2.结构与组织
- WebGL 更少代码，更多乐趣
- WebGL 绘制多个东西
- WebGL 场景图
3. WebGL实践 |
| WebGL 基础巩固：主要全面巩固WebGL 基础内容，全面梳理WebGL基础知识点，Three.js是基于WebGl API的封装，全面了解WebGL有助于更好的理解Threejs各项API背后逻辑和基本概念。 |
| 目标： 熟悉Threejs基本原理，重点了解场景，相机，顶点等概念 |
1. Threejs第一个3D场景(HTML框架文件)
- 创建HTML
- 旋转动画、requestAnimationFrame周期性渲染
- 鼠标操作三维场景旋转缩放
- 场景插入新的几何体
- 设置材质效果
- 光照效果设置
2. 顶点概念、几何体结和
- 顶点位置数据解析渲染
- 顶点颜色数据插值计算
- 顶点法向量数据光照计算
- 顶点索引复用顶点数据
- 设置Geometry顶点位置、顶点颜色数据
- Face3对象定义Geometry的三角面
- 访问几何体对象的数据
- 几何体旋转、缩放、平移变换
3. 材质对象
|
| 目标： 熟悉Threejs基本原理，重点了解光源，层级模型，几何体等概念，通过当日内容进行课堂实践，加深理解 |
1. 点线面模型对象
- 点、线、网格模型介绍
- 模型对象旋转平移缩放变换
- 对象克隆clone复制copy
2. 光源对象
- 光照原理和常见光源类型
- 阴影投影计
- 基类Light和Object3D
3. 层级模型、树结构
- 组对象Group、层级模型
- 对象节点命名、查找、遍历
- 本地位置坐标、世界位置坐标
4. 几何体对象、曲线、三维建模
- 常见几何体和曲线API介绍
- 圆弧线绘制(直线、椭圆、圆弧)、基类Curve
- 样条曲线、贝赛尔曲线
- 多个线条组合曲线CurvePath
- 曲线路径管道成型TubeGeometry
- 旋转成型LatheGeometry
- Shape对象和轮廓填充ShapeGeometry
- 拉伸扫描成型ExtrudeGeometry
- Threejs
|
| Threejs 详解 ：第三天主要进入Threejs收尾内容 详解Threejs剩余API，结合第二天内容完成第一个Threejs项目制作 |
| 目标： 熟悉Threejs基本原理，重点了解纹理贴图，相机。 |
1. 纹理贴图
- 创建纹理贴图
- UV映射原理(顶点纹理坐标)
- 数组材质、材质索引materialIndex
- 纹理对象Texture(阵列、偏移、旋转...)
- canvas画布、视频作为纹理贴图
- 凹凸贴图、法线贴图(压缩模型)
- 光照贴图添加阴影
- 高光贴图
- 环境贴图
- 10.数据纹理对象DataTexture
2. 相机对象(投影方式)
3. 精灵模型、粒子系统
- 精灵模型对象Sprite
- 中国城市PM2.5可视化案例
- 树林效果
- 下雨场景效果模拟
|
| 目标： 熟悉Threejs基本原理，通过两天内容可以独立完成Threejs项目开发 |
1. 帧动画模块
- 编辑关键帧并解析播放
- 解析外部模型的的帧动画
- 播放设置(暂停、时间段、时间点)
2. 骨骼动画、变形动画
- 骨骼动画原理
- 加载外部模型骨骼动画
- 变形目标动画原理
- 解析外部模型变形目标数据
3. 模型文件加载
- Three.js数据结构、导入导出
- 加载stl文件并解析
- 加载obj文件(几何体、材质、贴图)
- 加载FBX并解析骨骼动画
- 手镯在线预览(商品展示)
4. Threejs 项目实践 完成DIY项目
5. Threejs 社区分享，优秀插件介绍 |
