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

冰点也疯狂

第1章 课程介绍
8 D  w+ ~  K9 G% k介绍了微信小游戏的概念以及相关的由来，从宏观上对于微信小游戏的定位和价值有一个明确的认识
+ K  l4 w$ V, G( I& F" R( m: k' ] 1-1 导学介绍
; o# e4 D  m/ ?4 M+ d/ f 1-2 什么是微信小游戏
1-3 微信小游戏与H5小游戏
# P1 c/ H% |4 x  q 1-4 为什么要学习微信小游戏
, [5 U9 w9 b8 c8 ^3 [. {
第2章 微信小游戏平台与特性
讲了微信小游戏平台的相关特性，包括微信小游戏工程的建立，微信小游戏开发工具的详细使用，以及微信小游戏相关API的实战等
2-1 微信开发者工具介绍
2-2 小游戏项目工程初始模板建立
! |: O, p  {/ W7 i 2-3 微信开发者工具（模拟器介绍）
  O  g) `: @) ?; G0 e# M- X9 ? 2-4 微信开发者工具（编辑器介绍）
2-5 微信开发者工具（调试器介绍）
" D8 r- ~! j( U; X/ N2 Z
; }; J1 g- k) h: ^3 z# s第3章 THREEJS与WebGL核心概念
通过理论和实战，讲解了什么是webgl、什么是threejs以及两者的关系，并且介绍了相关webgl渲染管线的内容
) x+ I9 Q. F1 S7 o7 \/ z- W 3-1 什么是webgl —— 理论部分（概念）
, V: z) Z5 X5 n 3-2 什么是webgl —— 理论部分（GPU业务场景）
; g+ j7 @* B6 v2 I" e 3-3 什么是webgl —— 理论部分（如何对CPU进行编程）
. Z! ?( ^4 I" c7 U4 ~ 3-4 webgl实战shader的创建和绑定
3-5 webgl实战静态三角形的绘制（1）
0 D# h$ _3 F; X: e% O. Z 3-6 webgl实战静态三角形的绘制（2）
3-7 webgl实战旋转三角形的绘制
3-8 webgl实战动态的旋转三角形的绘制
3-9 threejs理论部分
: ^& H. f, y" h/ `: j7 { 3-10 threejs 绘制旋转三角形(场景渲染)
3-11 threejs绘制旋转三角形(动态效果)
4 S# [" r2 w, a+ ^, m
第4章 项目结构
. U5 ^2 s! a0 [8 ?( d对四个迭代版本，进行了详细的需求分析，并且对项目的整体结构进行了详细的介绍，包括项目目录设计、threejs框架在小游戏平台的集成、weapp-adapater源码分析和编译等
4-1 项目需求分析
  ^0 ]* s- u+ `7 B  i6 s' | 4-2 MVP项目结构 & 设计 &分析
2 w) a5 u' M! }' x( p 4-3 MVP基本项目结构搭建（引入three.js）
$ x( Y% t! U+ A6 @ 4-4 小游戏平台（旋转三角实战）
: C5 g. P7 F4 A$ X 4-5 小游戏平台（旋转三角实战完善）
- {# ~& m; C4 {. K" K, U. \& V 4-6 MVP基本项目结构搭建完成
; V+ q! B: R+ p! w- h
第5章 基本场景搭建（场景和视角）
4 b3 k( K( c5 Z: j  O# f: H5 `% V详细讲解了webgl渲染管线中的视图矩阵和投影矩阵的推导，并且在webg相关demo中进行了实现，进而实战了threejs的WebGLRenderer、Scene和Camera，剖析其webgl中对应的原理，并开发出跳一跳小游戏的整体场景布局
5-1 基本场景搭建 —— 本章核心内容
$ F/ N6 w' G- g# \8 ~/ }3 R 5-2 基本场景渲染理解
) U$ r+ {1 k6 h1 {8 k1 r 5-3 投影矩阵数学推导
' m% O6 c* n/ W 5-4 视图矩阵推导
5-5 视图矩阵webgl开发
1 o% P1 ]# l) U7 j! \, T- H 5-6 透视投影矩阵webgl开发
5 ~- U. g1 R( J3 C 5-7 正交投影矩阵webgl开发
! ]% h: N2 E& _0 n; X 5-8 mvc基础
7 K1 g  z8 p/ z2 @) R0 p9 E4 M 5-9 游戏page的搭建
. T, n# ?: J  J+ Q, f4 @; ] 5-10 mvc中的event
6 y1 U0 I, ^4 V& @ 5-11 2d画布绘制能力在threejs中的整合
! I1 m( l' B. h9 Z& p; c 5-12 使用mvc完成页面切换
7 h* `' x+ E- O; w! c 5-13 scene和camera的设置
# i' E+ J# Y7 j3 D 5-14 es6的继承多态开发block

2 k& |" Q9 w% H- E) P3 ^第6章 基本场景搭建（ 光照和阴影）
8 q6 s& G* L$ `3 X从webgl原理和实现和threejs光照和阴影实战，全方位的去讲解场景中的光照与阴影的搭建
) ^+ {- |( ]& `+ I' b) K: v9 I 6-1 cube的开发思路
6-2 光照的原理
0 D+ ^, R! l6 b 6-3 索引绘制
6-4 arraybuffer讲解
1 y0 o5 v3 U- z: L 6-5 cube的绘制
5 t7 n" x4 s# k7 N+ a 6-6 平行光下的漫反射
6-7 点光源下的漫反射
6-8 phong模型漫反射下的球体的绘制
" ~: {: P1 E, E( P 6-9 纹理、阴影、帧缓冲区 理论
  y. i- J8 N9 w: @; o# C) W0 f# b8 ^ 6-10 webgl砖块纹理实现（1）
" y) ?. x8 g9 L4 a9 a( V+ t0 G) F  E( q 6-11 webgl砖块纹理实现（2）
6-12 webgl砖块纹理实现（3）
6-13 shadow map对应shader的开发
6-14 新建framebuffer和对应的纹理
6-15 渲染缓冲区及framebuffer的关联对象
4 I/ I  v- E7 r% m" }0 S& \1 b* S 6-16 在shader中使用shadow map
6-17 shader的数据准备
6-18 绘制时进行shader的切换
6-19 threejs场景设置光照
! U0 }5 d/ @! }4 s' G! ~8 Z 6-20 threejs场景增加背景和地面
3 I/ I$ P$ o8 C# s 6-21 threejs场景增加阴影

/ f0 n9 _: ?1 M( `7 C% z6 ^第7章 基本游戏逻辑开发
在本章中，实现了基本游戏逻辑的开发，包括物理引擎、碰撞检测、跳跃逻辑等等模块，完成跳一跳游戏的基本功能
7-1 bottle绘制分析
! o; O3 @" {1 W- j6 W) j 7-2 bottle head部分的绘制
) @$ I# M, G' z& u! Q 7-3 bottle bottom部分的绘制
- ^+ H( f' [; A$ x" \, \) J 7-4 bottle body部分的绘制
3 p" G1 M* e6 H$ u; h 7-5 threejs纹理映射&bottle纹理高光
7-6 bottle head部分旋转
7-7 动画过程分析
7-8 动画库基本逻辑开发
7-9 线性动画的实现
7-10 ease mode的介绍和应用
7-11 跳跃逻辑分析
; D2 A1 l6 F+ K8 k0 a/ S# h. X 7-12 跳跃模型旋转开发
7-13 bottle按压收缩的过程
7-14 block压缩开发
7-15 斜上抛运动过程分析
7-16 斜上抛运动代码开发
8 I4 D" n& ^: [/ c; S 7-17 碰撞检测（1）
7-18 碰撞检测（2）
7-19 使用pointInPolygon判断碰撞状态
7-20 实时碰撞检测
7-21 实时碰撞检测调试
7-22 nextBlock的更新逻辑
2 v6 S, u1 N  o 7-23 碰撞检测调试
/ V8 i: G" i5 Q, t7 ~9 S9 h* n# G2 B) b 7-24 跳跃落地效果优化
; T4 s" t# G/ E 7-25 gameover重启游戏逻辑的开发
$ x- X& q6 T0 r2 G 7-26 积分逻辑的开发

  r/ Q+ P# f  X, E9 w第8章 版本迭代
: G$ h: h0 _2 W/ N在本章中主要进行了声音的集成和动画细节的优化，深入实战了threejs的各种能力和微信小游戏的api，并且了解了游戏的开发字节，完成之后一个完整的跳一跳游戏功能的版本就完成了。
% D* g+ g4 w2 ^2 H0 e) g! ? 8-1 音频管理模块开发
+ W* l1 U# ]& ]5 a 8-2 跳跃过程增加音效
8-3 坠落逻辑补充+动画库升级停止所有动画能力
% E9 |$ \$ [3 P- v2 d 8-4 坠落动画的开发
  g# M9 }( b9 Z# L, D& E 8-5 block增加image纹理样式
8-6 彩色block的开发
0 _" v# r6 C* {5 T 8-7 粒子聚集效果
8-8 粒子散开效果
8-9 跳跃增加分数的动画
8 H' K/ x0 W' }3 g4 Z 8-10 跳跃轨迹的开发
( s, F  K$ I% d" B