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

冰点也疯狂

第1章 课程介绍
7 o# g4 ?' w* T介绍了微信小游戏的概念以及相关的由来，从宏观上对于微信小游戏的定位和价值有一个明确的认识
7 v) b8 l+ r5 e' r 1-1 导学介绍
" l) W; d0 c0 U. y* v# ] 1-2 什么是微信小游戏
1-3 微信小游戏与H5小游戏
. G, @! X) [0 u& }- b& c- s$ q9 { 1-4 为什么要学习微信小游戏
) E5 i& x$ E: w4 l( Y6 b
1 |1 u+ d' Z4 E3 ~% f第2章 微信小游戏平台与特性
讲了微信小游戏平台的相关特性，包括微信小游戏工程的建立，微信小游戏开发工具的详细使用，以及微信小游戏相关API的实战等
2-1 微信开发者工具介绍
2 S( [& Z; H2 T3 v4 W3 Z1 [: e 2-2 小游戏项目工程初始模板建立
2 ^/ e3 M% M1 T$ ~ 2-3 微信开发者工具（模拟器介绍）
2-4 微信开发者工具（编辑器介绍）
* ]$ P1 P  J8 X5 x$ `( Z 2-5 微信开发者工具（调试器介绍）
# I3 p7 g! ]7 I% l8 {
+ U8 P1 G6 b# @. _6 ^8 U" L# a第3章 THREEJS与WebGL核心概念
通过理论和实战，讲解了什么是webgl、什么是threejs以及两者的关系，并且介绍了相关webgl渲染管线的内容
3-1 什么是webgl —— 理论部分（概念）
3-2 什么是webgl —— 理论部分（GPU业务场景）
3-3 什么是webgl —— 理论部分（如何对CPU进行编程）
0 _% K' D0 O5 }; |$ s 3-4 webgl实战shader的创建和绑定
3-5 webgl实战静态三角形的绘制（1）
* V4 W! U4 A4 o) _9 W4 y 3-6 webgl实战静态三角形的绘制（2）
2 O8 F; L: u  m2 g5 O. f 3-7 webgl实战旋转三角形的绘制
+ B, k  ]5 v) Y6 d, r2 x* ^1 R 3-8 webgl实战动态的旋转三角形的绘制
; q4 H! M( I/ ?5 | 3-9 threejs理论部分
- H* Z$ @6 v9 K 3-10 threejs 绘制旋转三角形(场景渲染)
3-11 threejs绘制旋转三角形(动态效果)

第4章 项目结构
对四个迭代版本，进行了详细的需求分析，并且对项目的整体结构进行了详细的介绍，包括项目目录设计、threejs框架在小游戏平台的集成、weapp-adapater源码分析和编译等
4-1 项目需求分析
) a8 e! y$ N$ x; w1 f 4-2 MVP项目结构 & 设计 &分析
4-3 MVP基本项目结构搭建（引入three.js）
* R3 A: F6 q' e 4-4 小游戏平台（旋转三角实战）
7 E; A. J. E3 c2 P$ `) E 4-5 小游戏平台（旋转三角实战完善）
4-6 MVP基本项目结构搭建完成

: a9 I6 t4 B/ V8 Q第5章 基本场景搭建（场景和视角）
( A$ p: T1 A8 {2 z% S详细讲解了webgl渲染管线中的视图矩阵和投影矩阵的推导，并且在webg相关demo中进行了实现，进而实战了threejs的WebGLRenderer、Scene和Camera，剖析其webgl中对应的原理，并开发出跳一跳小游戏的整体场景布局
5-1 基本场景搭建 —— 本章核心内容
/ u3 Q3 F2 |' f  A% b 5-2 基本场景渲染理解
" o; L8 _# L* z; U5 p: w 5-3 投影矩阵数学推导
5-4 视图矩阵推导
5-5 视图矩阵webgl开发
5-6 透视投影矩阵webgl开发
5-7 正交投影矩阵webgl开发
5-8 mvc基础
5-9 游戏page的搭建
5-10 mvc中的event
  S1 u7 W3 G- K6 k+ g9 {5 @2 j 5-11 2d画布绘制能力在threejs中的整合
; ]7 k+ J# h' ^. B* O6 h" Z 5-12 使用mvc完成页面切换
% ~$ ~( P9 P* t! I0 a) w 5-13 scene和camera的设置
5-14 es6的继承多态开发block

% h1 {; {. r; v7 N第6章 基本场景搭建（ 光照和阴影）
& j; `/ a2 w1 M' x2 Q. o从webgl原理和实现和threejs光照和阴影实战，全方位的去讲解场景中的光照与阴影的搭建
! P' j- s8 v, m* K' k 6-1 cube的开发思路
6-2 光照的原理
6-3 索引绘制
6-4 arraybuffer讲解
2 e0 k; W& L# g8 C' n 6-5 cube的绘制
6-6 平行光下的漫反射
. X7 F; {7 i8 ^) f" {4 X1 D; ] 6-7 点光源下的漫反射
: o/ I( Y" ~- h- ^% i$ | 6-8 phong模型漫反射下的球体的绘制
6-9 纹理、阴影、帧缓冲区 理论
2 r8 S. j/ x  n9 T 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的数据准备
' Q# u, ]* }; t% [ 6-18 绘制时进行shader的切换
4 N1 o" B, g" w 6-19 threejs场景设置光照
6-20 threejs场景增加背景和地面
6-21 threejs场景增加阴影
3 K) c6 S. T; W# x4 j
$ k% g1 ]2 }  O8 Q- {第7章 基本游戏逻辑开发
5 v! ]2 F2 q# c, q" ?8 {6 h在本章中，实现了基本游戏逻辑的开发，包括物理引擎、碰撞检测、跳跃逻辑等等模块，完成跳一跳游戏的基本功能
7-1 bottle绘制分析
8 K8 k( P3 E8 |) {# C# W 7-2 bottle head部分的绘制
6 c" O- y% h$ f) W$ Y: i 7-3 bottle bottom部分的绘制
7-4 bottle body部分的绘制
7-5 threejs纹理映射&bottle纹理高光
; ?5 z0 N4 D7 U1 m1 g# S 7-6 bottle head部分旋转
7-7 动画过程分析
# ?- U: L0 P, B. Z! G+ ~+ _* [. B 7-8 动画库基本逻辑开发
7-9 线性动画的实现
7-10 ease mode的介绍和应用
7-11 跳跃逻辑分析
8 G& @4 V# j- W- F# t 7-12 跳跃模型旋转开发
* P9 ]9 b- ]+ Z% n2 J 7-13 bottle按压收缩的过程
7-14 block压缩开发
" T! M, W! F# h0 H0 a 7-15 斜上抛运动过程分析
0 \7 ?$ `# t) m. F4 ^3 [+ _ 7-16 斜上抛运动代码开发
7-17 碰撞检测（1）
' o% v  K9 N! |& [: s 7-18 碰撞检测（2）
7-19 使用pointInPolygon判断碰撞状态
7-20 实时碰撞检测
1 S  M/ ^; t4 s( T8 a& \$ R" K 7-21 实时碰撞检测调试
+ }$ L8 m* k1 J0 x5 M5 C! p4 M# m 7-22 nextBlock的更新逻辑
7-23 碰撞检测调试
0 [2 P, W' H. H; r 7-24 跳跃落地效果优化
7-25 gameover重启游戏逻辑的开发
7-26 积分逻辑的开发

第8章 版本迭代
在本章中主要进行了声音的集成和动画细节的优化，深入实战了threejs的各种能力和微信小游戏的api，并且了解了游戏的开发字节，完成之后一个完整的跳一跳游戏功能的版本就完成了。
8-1 音频管理模块开发
9 \7 A) I( A* u( B$ W6 [ 8-2 跳跃过程增加音效
. q5 v' V6 ^) ~4 i5 d6 T! f 8-3 坠落逻辑补充+动画库升级停止所有动画能力
- u  G! y9 _* R/ B+ y# N4 U 8-4 坠落动画的开发
8-5 block增加image纹理样式
+ a* o3 Z1 @$ O2 n) `5 g, B 8-6 彩色block的开发
8 R0 Z5 Q" }' _# a2 Y/ Z! h 8-7 粒子聚集效果
1 z8 s5 w7 Y$ T! x) c 8-8 粒子散开效果
8-9 跳跃增加分数的动画
% P5 q, Y3 u1 `! ^& d0 w5 h* v 8-10 跳跃轨迹的开发
( X3 s8 l) I/ X: \" H# F