[282] three.js-打造微信爆款小游戏跳一跳 -

网盘链接：

1. 课程介绍

• 1-1 导学介绍
• 1-2 什么是微信小游戏
• 1-3 微信小游戏与H5小游戏
• 1-4 为什么要学习微信小游戏
• 1-5 【讨论题】哪些游戏可以在微信小游戏平台上开发？

2. 微信小游戏平台与特性

• 2-1 微信开发者工具介绍
• 2-2 小游戏项目工程初始模板建立
• 2-3 微信开发者工具（模拟器介绍）
• 2-4 微信开发者工具（编辑器介绍）
• 2-5 微信开发者工具（调试器介绍）
• 2-6 【讨论题】微信小游戏是个什么样的平台？

3. THREEJS与WebGL核心概念

• 3-1 什么是webgl —— 理论部分（概念）
• 3-2 什么是webgl —— 理论部分（GPU业务场景）
• 3-3 什么是webgl —— 理论部分（如何对CPU进行编程）
• 3-4 webgl实战shader的创建和绑定
• 3-5 webgl实战静态三角形的绘制（1）
• 3-6 webgl实战静态三角形的绘制（2）
• 3-7 webgl实战旋转三角形的绘制
• 3-8 webgl实战动态的旋转三角形的绘制
• 3-9 【讨论题】谈一谈纹理管理
• 3-10 threejs理论部分
• 3-11 threejs 绘制旋转三角形(场景渲染)
• 3-12 threejs绘制旋转三角形(动态效果)

4. 项目结构

• 4-1 项目需求分析
• 4-2 MVP项目结构 & 设计 &分析
• 4-3 MVP基本项目结构搭建（引入three.js）
• 4-4 小游戏平台（旋转三角实战）
• 4-5 小游戏平台（旋转三角实战完善）
• 4-6 MVP基本项目结构搭建完成
• 4-7 【讨论题】我们常听到的页面交互相关的设计模式

5. 基本场景搭建（场景和视角）

• 5-1 基本场景搭建 —— 本章核心内容
• 5-2 基本场景渲染理解
• 5-3 投影矩阵数学推导
• 5-4 视图矩阵推导
• 5-5 视图矩阵webgl开发
• 5-6 透视投影矩阵webgl开发
• 5-7 正交投影矩阵webgl开发
• 5-8 【学习任务】实现mvp矩阵（模型矩阵、视图矩阵、投影矩阵）
• 5-9 mvc基础
• 5-10 游戏page的搭建
• 5-11 mvc中的event
• 5-12 2d画布绘制能力在threejs中的整合
• 5-13 使用mvc完成页面切换
• 5-14 scene和camera的设置
• 5-15 es6的继承多态开发block
• 5-16 【讨论题】你了解 es6 中 class 的概念么?

6. 基本场景搭建（ 光照和阴影）

• 6-1 cube的开发思路
• 6-2 光照的原理
• 6-3 索引绘制
• 6-4 arraybuffer讲解
• 6-5 cube的绘制
• 6-6 平行光下的漫反射
• 6-7 点光源下的漫反射
• 6-8 phong模型漫反射下的球体的绘制
• 6-9 纹理、阴影、帧缓冲区 理论
• 6-10 webgl砖块纹理实现（1）
• 6-11 webgl砖块纹理实现（2）
• 6-12 webgl砖块纹理实现（3）
• 6-13 shadow map对应shader的开发
• 6-14 新建framebuffer和对应的纹理
• 6-15 渲染缓冲区及framebuffer的关联对象
• 6-16 在shader中使用shadow map
• 6-17 shader的数据准备
• 6-18 绘制时进行shader的切换
• 6-19 threejs场景设置光照
• 6-20 threejs场景增加背景和地面
• 6-21 threejs场景增加阴影
• 6-22 【讨论题】单元测试的重要性以及如何为工程做好单元测试？
• 6-23 用webgl和threejs完成带阴影和纹理的旋转砖块开发

7. 基本游戏逻辑开发

• 7-1 bottle绘制分析
• 7-2 bottle head部分的绘制
• 7-3 bottle bottom部分的绘制
• 7-4 bottle body部分的绘制
• 7-5 threejs纹理映射&bottle纹理高光
• 7-6 bottle head部分旋转
• 7-7 动画过程分析
• 7-8 动画库基本逻辑开发
• 7-9 线性动画的实现
• 7-10 ease mode的介绍和应用
• 7-11 跳跃逻辑分析
• 7-12 跳跃模型旋转开发
• 7-13 bottle按压收缩的过程
• 7-14 block压缩开发
• 7-15 斜上抛运动过程分析
• 7-16 斜上抛运动代码开发
• 7-17 【学习任务】使用 threejs 完成 bottle 压缩弹
• 7-18 碰撞检测（1）
• 7-19 碰撞检测（2）
• 7-20 使用pointInPolygon判断碰撞状态
• 7-21 实时碰撞检测
• 7-22 实时碰撞检测调试
• 7-23 nextBlock的更新逻辑
• 7-24 碰撞检测调试
• 7-25 跳跃落地效果优化
• 7-26 gameover重启游戏逻辑的开发
• 7-27 积分逻辑的开发
• 7-28 【讨论题】一个网页中多个渲染场景如何开发实现？

8. 版本迭代

• 8-1 音频管理模块开发
• 8-2 跳跃过程增加音效
• 8-3 坠落逻辑补充+动画库升级停止所有动画能力
• 8-4 坠落动画的开发
• 8-5 block增加image纹理样式
• 8-6 彩色block的开发
• 8-7 粒子聚集效果
• 8-8 粒子散开效果
• 8-9 【学习任务】实现bottle周围的粒子效果
• 8-10 跳跃增加分数的动画
• 8-11 跳跃轨迹的开发
• 8-12 【讨论题】threejs 渲染多少元素会开始卡顿？

9. 排行榜与发布

• 9-1 开始游戏页面开发
• 9-2 数据链中的开放数据域和主域的概念
• 9-3 开放数据域实战
• 9-4 使用sharedCanvas绘制排行榜
• 9-5 【学习任务】使用小游戏中的sharedCanvas开发排行榜
• 9-6 webgl开发数据的性能问题
• 9-7 内存分析 —— heap snapshot
• 9-8 内存分析 —— 基于js function的allocation profile
• 9-9 内存分析 —— 内存泄漏分析的allocation timeline
• 9-10 performance分析cpu、gpu和painting等过程
• 9-11 预览和发布..
• 9-12 小游戏其他内容
• 9-13 【讨论题】你用chrome devtools做过哪些事情呢？

10. 课程总结

• 10-1 本课程总结
• 10-2 【讨论题】在本课程中你最大的收获是什么？