        Three.js 3D 引擎详解与应用开发培训

目标： 掌握前端开发重点内容，熟悉WebGL基本原理
1. 前端基础
前端重点内容
项目搭建
2.WebGL 基础
WebGL 基本原理
WebGL 是如何工作的
WebGL 着色器和 GLSL
3.图像处理：
WebGL 图像处理
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. 材质对象
1.常用材质介绍
2.材质共有属性、私有属性
目标： 熟悉Threejs基本原理，重点了解光源，层级模型，几何体等概念，通过当日内容进行课堂实践，加深理解
1. 点线面模型对象
点、线、网格模型介绍
模型对象旋转平移缩放变换
对象克隆clone复制copy
2. 光源对象
光照原理和常见光源类型
阴影投影计
基类Light和Object3D
3. 层级模型、树结构
组对象Group、层级模型
对象节点命名、查找、遍历
本地位置坐标、世界位置坐标
4. 几何体对象、曲线、三维建模
常见几何体和曲线API介绍
圆弧线绘制(直线、椭圆、圆弧)、基类Curve
样条曲线、贝赛尔曲线
多个线条组合曲线CurvePath
曲线路径管道成型TubeGeometry
旋转成型LatheGeometry
Shape对象和轮廓填充ShapeGeometry
拉伸扫描成型ExtrudeGeometry
Threejs
目标： 熟悉Threejs基本原理，重点了解纹理贴图，相机。
1. 纹理贴图
创建纹理贴图
UV映射原理(顶点纹理坐标)
数组材质、材质索引materialIndex
纹理对象Texture(阵列、偏移、旋转...)
canvas画布、视频作为纹理贴图
凹凸贴图、法线贴图(压缩模型)
光照贴图添加阴影
高光贴图
环境贴图
10.数据纹理对象DataTexture
2. 相机对象(投影方式)
正投影和透视投影相机
窗口变化自适应渲染
3. 精灵模型、粒子系统
精灵模型对象Sprite
中国城市PM2.5可视化案例
树林效果
下雨场景效果模拟
1. 帧动画模块
编辑关键帧并解析播放
解析外部模型的的帧动画
播放设置(暂停、时间段、时间点)
2. 骨骼动画、变形动画
骨骼动画原理
加载外部模型骨骼动画
变形目标动画原理
解析外部模型变形目标数据
3. 模型文件加载
Three.js数据结构、导入导出
加载stl文件并解析
加载obj文件(几何体、材质、贴图)
加载FBX并解析骨骼动画
手镯在线预览(商品展示)
4. Threejs 项目实践 完成DIY项目
5. Threejs 社区分享，优秀插件介绍