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

冰点也疯狂

第1章 课程介绍
介绍了微信小游戏的概念以及相关的由来，从宏观上对于微信小游戏的定位和价值有一个明确的认识
1-1 导学介绍
+ N% W* Q& V6 F& n/ `5 E) r 1-2 什么是微信小游戏
- s% z0 x: G/ ?# Y+ M% a$ F: C 1-3 微信小游戏与H5小游戏
- g- d) o% D$ L9 A) z 1-4 为什么要学习微信小游戏
% O8 Y" x  N! S
第2章 微信小游戏平台与特性
讲了微信小游戏平台的相关特性，包括微信小游戏工程的建立，微信小游戏开发工具的详细使用，以及微信小游戏相关API的实战等
. }3 Z( ?& F, N3 @% e 2-1 微信开发者工具介绍
. N, e: X& j4 @3 _ 2-2 小游戏项目工程初始模板建立
2-3 微信开发者工具（模拟器介绍）
2-4 微信开发者工具（编辑器介绍）
2-5 微信开发者工具（调试器介绍）
1 n/ I3 s. w& \& |
第3章 THREEJS与WebGL核心概念
通过理论和实战，讲解了什么是webgl、什么是threejs以及两者的关系，并且介绍了相关webgl渲染管线的内容
3-1 什么是webgl —— 理论部分（概念）
; N# ?6 w% y3 l+ n) Q 3-2 什么是webgl —— 理论部分（GPU业务场景）
3-3 什么是webgl —— 理论部分（如何对CPU进行编程）
3-4 webgl实战shader的创建和绑定
3-5 webgl实战静态三角形的绘制（1）
3-6 webgl实战静态三角形的绘制（2）
+ B2 U7 |: |7 Y) k2 N 3-7 webgl实战旋转三角形的绘制
9 {2 f1 ]0 q# s- ^" V/ r* T% O5 w 3-8 webgl实战动态的旋转三角形的绘制
( X7 r2 x* _% D3 o 3-9 threejs理论部分
, {: N9 }, L# r3 ^; V' d; F0 o 3-10 threejs 绘制旋转三角形(场景渲染)
% E! `- |  g! G; f& s 3-11 threejs绘制旋转三角形(动态效果)

第4章 项目结构
3 D4 `4 L* s* _4 n2 c+ j5 I对四个迭代版本，进行了详细的需求分析，并且对项目的整体结构进行了详细的介绍，包括项目目录设计、threejs框架在小游戏平台的集成、weapp-adapater源码分析和编译等
4-1 项目需求分析
" @1 t+ t5 u" F: D 4-2 MVP项目结构 & 设计 &分析
4-3 MVP基本项目结构搭建（引入three.js）
$ b. m4 p( [6 ~ 4-4 小游戏平台（旋转三角实战）
! i8 F. b9 \7 S2 { 4-5 小游戏平台（旋转三角实战完善）
2 B1 }: T% p- J5 L0 { 4-6 MVP基本项目结构搭建完成

4 q* b4 q6 Z/ l! ~/ ^) j2 X第5章 基本场景搭建（场景和视角）
详细讲解了webgl渲染管线中的视图矩阵和投影矩阵的推导，并且在webg相关demo中进行了实现，进而实战了threejs的WebGLRenderer、Scene和Camera，剖析其webgl中对应的原理，并开发出跳一跳小游戏的整体场景布局
5-1 基本场景搭建 —— 本章核心内容
5-2 基本场景渲染理解
# y4 j2 Z5 J: n( G 5-3 投影矩阵数学推导
5-4 视图矩阵推导
; q. L. |, \# o4 s9 H4 u 5-5 视图矩阵webgl开发
5-6 透视投影矩阵webgl开发
+ p9 e# D/ J% c* j: m 5-7 正交投影矩阵webgl开发
" K' T( i+ F9 j: _ 5-8 mvc基础
5-9 游戏page的搭建
5-10 mvc中的event
5-11 2d画布绘制能力在threejs中的整合
5 @; N  Z( h" o" X  J) I 5-12 使用mvc完成页面切换
3 Y0 a$ ?6 \% s4 }( w 5-13 scene和camera的设置
! J: D! _6 v+ Y4 r$ d2 C0 d 5-14 es6的继承多态开发block

% s. B8 f! J& J% G" d' d: K第6章 基本场景搭建（ 光照和阴影）
& n+ L' F/ g" b3 k从webgl原理和实现和threejs光照和阴影实战，全方位的去讲解场景中的光照与阴影的搭建
6-1 cube的开发思路
6-2 光照的原理
# K9 D) v$ i4 L 6-3 索引绘制
! X, F* W8 u7 j) D# y2 G 6-4 arraybuffer讲解
7 k( b# l* {& Z: N. [4 u6 ` 6-5 cube的绘制
& x. E$ c5 t$ ] 6-6 平行光下的漫反射
6-7 点光源下的漫反射
% b& @# |% {1 w9 ^- _ 6-8 phong模型漫反射下的球体的绘制
9 @% H1 M6 f; b+ d8 i) F 6-9 纹理、阴影、帧缓冲区 理论
6-10 webgl砖块纹理实现（1）
& q/ C4 i  `- ^5 D( t8 D 6-11 webgl砖块纹理实现（2）
! F1 L0 q! t% q. b6 ` 6-12 webgl砖块纹理实现（3）
6-13 shadow map对应shader的开发
' Z* W6 a; s4 U  E% Q; [2 N 6-14 新建framebuffer和对应的纹理
6-15 渲染缓冲区及framebuffer的关联对象
6-16 在shader中使用shadow map
6-17 shader的数据准备
- _, o& L/ T$ |+ M 6-18 绘制时进行shader的切换
6-19 threejs场景设置光照
6-20 threejs场景增加背景和地面
6-21 threejs场景增加阴影

9 J  C4 E9 M* |+ ?第7章 基本游戏逻辑开发
" N* C9 b% f  c. H在本章中，实现了基本游戏逻辑的开发，包括物理引擎、碰撞检测、跳跃逻辑等等模块，完成跳一跳游戏的基本功能
7-1 bottle绘制分析
7-2 bottle head部分的绘制
6 j7 W, p1 w1 Q5 Q4 |6 u5 h2 Z 7-3 bottle bottom部分的绘制
- k& u6 ~& a- L* d, m( a: f 7-4 bottle body部分的绘制
7-5 threejs纹理映射&bottle纹理高光
" D' n- D5 Q% P3 `' x* k 7-6 bottle head部分旋转
, R  B5 q9 \9 B) _$ f. e0 O* { 7-7 动画过程分析
7-8 动画库基本逻辑开发
+ U- [* |5 Y+ y# Y) ]/ v) ^+ u 7-9 线性动画的实现
3 N: [  a/ s8 j0 t' z& H- h" w5 w1 ~ 7-10 ease mode的介绍和应用
6 a! [8 y% }, y/ _ 7-11 跳跃逻辑分析
7-12 跳跃模型旋转开发
3 a' k' d2 O* F5 ?$ [; P7 N( k 7-13 bottle按压收缩的过程
7-14 block压缩开发
, Q) e4 q1 x3 i: _3 o 7-15 斜上抛运动过程分析
7-16 斜上抛运动代码开发
& A  S$ A: G- o! W$ G 7-17 碰撞检测（1）
7-18 碰撞检测（2）
7-19 使用pointInPolygon判断碰撞状态
7-20 实时碰撞检测
) _  u- K3 k+ Z2 a 7-21 实时碰撞检测调试
( ~; k# f8 k& Y 7-22 nextBlock的更新逻辑
$ O( q% m7 \9 a6 `3 U7 d 7-23 碰撞检测调试
  E2 f: z' q6 ~6 d( {5 }- ~ 7-24 跳跃落地效果优化
7-25 gameover重启游戏逻辑的开发
- C, t' o2 E, z& o$ {7 v9 t/ o 7-26 积分逻辑的开发
2 F# Z% g" r9 n1 C
& \: _: d5 e& l$ R" |第8章 版本迭代
在本章中主要进行了声音的集成和动画细节的优化，深入实战了threejs的各种能力和微信小游戏的api，并且了解了游戏的开发字节，完成之后一个完整的跳一跳游戏功能的版本就完成了。
. Z% O; S8 R) F9 H! D 8-1 音频管理模块开发
; a9 p9 R& J7 c/ d2 e4 r4 t7 g' d 8-2 跳跃过程增加音效
0 q2 G, G, ]- f) Z. F  [6 h 8-3 坠落逻辑补充+动画库升级停止所有动画能力
8-4 坠落动画的开发
* x) l' C4 B4 z3 L$ n7 m0 h 8-5 block增加image纹理样式
8-6 彩色block的开发
8-7 粒子聚集效果
8-8 粒子散开效果
8 ?& X$ T2 \& V. c/ y( q6 I 8-9 跳跃增加分数的动画
" ~2 V# G. G) U' m3 i 8-10 跳跃轨迹的开发
4 r: ?1 {% X% n' Q, J
5 F9 e6 a! f( U$ c) c* |, E& M