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

冰点也疯狂

第1章 课程介绍
& S2 Y$ t9 P; u7 p介绍了微信小游戏的概念以及相关的由来，从宏观上对于微信小游戏的定位和价值有一个明确的认识
1-1 导学介绍
1-2 什么是微信小游戏
1-3 微信小游戏与H5小游戏
1-4 为什么要学习微信小游戏

& F% j6 Y& K" a第2章 微信小游戏平台与特性
( y# q3 P' F5 x/ r6 n4 s6 X讲了微信小游戏平台的相关特性，包括微信小游戏工程的建立，微信小游戏开发工具的详细使用，以及微信小游戏相关API的实战等
2-1 微信开发者工具介绍
% p8 o$ F4 m9 v8 R 2-2 小游戏项目工程初始模板建立
2-3 微信开发者工具（模拟器介绍）
4 D6 V1 L' e- X# ] 2-4 微信开发者工具（编辑器介绍）
2-5 微信开发者工具（调试器介绍）

第3章 THREEJS与WebGL核心概念
通过理论和实战，讲解了什么是webgl、什么是threejs以及两者的关系，并且介绍了相关webgl渲染管线的内容
3-1 什么是webgl —— 理论部分（概念）
3-2 什么是webgl —— 理论部分（GPU业务场景）
. l+ E/ m1 V1 q1 I9 j2 R 3-3 什么是webgl —— 理论部分（如何对CPU进行编程）
3-4 webgl实战shader的创建和绑定
3-5 webgl实战静态三角形的绘制（1）
3-6 webgl实战静态三角形的绘制（2）
8 L) O4 S& v  u+ T 3-7 webgl实战旋转三角形的绘制
" c& ~7 @7 M6 _ 3-8 webgl实战动态的旋转三角形的绘制
! K3 ]8 O/ _4 b! ?5 A 3-9 threejs理论部分
- X8 L! c' t) y: ] 3-10 threejs 绘制旋转三角形(场景渲染)
3-11 threejs绘制旋转三角形(动态效果)

第4章 项目结构
对四个迭代版本，进行了详细的需求分析，并且对项目的整体结构进行了详细的介绍，包括项目目录设计、threejs框架在小游戏平台的集成、weapp-adapater源码分析和编译等
4-1 项目需求分析
4-2 MVP项目结构 & 设计 &分析
4-3 MVP基本项目结构搭建（引入three.js）
4-4 小游戏平台（旋转三角实战）
7 W+ k6 Z4 }( e, n8 u 4-5 小游戏平台（旋转三角实战完善）
4-6 MVP基本项目结构搭建完成

第5章 基本场景搭建（场景和视角）
详细讲解了webgl渲染管线中的视图矩阵和投影矩阵的推导，并且在webg相关demo中进行了实现，进而实战了threejs的WebGLRenderer、Scene和Camera，剖析其webgl中对应的原理，并开发出跳一跳小游戏的整体场景布局
( l0 c5 g! ~# T3 m4 ]+ b; f 5-1 基本场景搭建 —— 本章核心内容
5-2 基本场景渲染理解
& J4 W1 o) d; t/ W; Y4 i 5-3 投影矩阵数学推导
2 g- X/ {' D0 S  |* A; ^% L( [ 5-4 视图矩阵推导
5-5 视图矩阵webgl开发
9 `$ d9 K1 a8 `' j 5-6 透视投影矩阵webgl开发
$ l. G5 _1 ~6 {9 `5 U 5-7 正交投影矩阵webgl开发
; ?8 E/ m# E+ g0 x 5-8 mvc基础
5-9 游戏page的搭建
5-10 mvc中的event
+ U" K8 L/ t& ]6 ?4 n 5-11 2d画布绘制能力在threejs中的整合
5-12 使用mvc完成页面切换
5-13 scene和camera的设置
5-14 es6的继承多态开发block

1 p: c4 ]: i+ i, ^8 H# Z第6章 基本场景搭建（ 光照和阴影）
! Q; i1 W2 y( J' V从webgl原理和实现和threejs光照和阴影实战，全方位的去讲解场景中的光照与阴影的搭建
6-1 cube的开发思路
6-2 光照的原理
; P7 V2 G* G) d% Z( u: F4 ^3 O2 H 6-3 索引绘制
6-4 arraybuffer讲解
6-5 cube的绘制
2 O/ R9 V% V3 \6 r- J3 j 6-6 平行光下的漫反射
- o8 G  m8 b# ^) `$ i! b6 k, A 6-7 点光源下的漫反射
6-8 phong模型漫反射下的球体的绘制
6-9 纹理、阴影、帧缓冲区 理论
6-10 webgl砖块纹理实现（1）
! z2 U1 w6 G; ?, c$ H& @ 6-11 webgl砖块纹理实现（2）
3 r' |2 r" g6 V3 S 6-12 webgl砖块纹理实现（3）
6-13 shadow map对应shader的开发
8 t( N% H5 }( y9 M$ I  F 6-14 新建framebuffer和对应的纹理
, a3 T8 |" k0 e! W( g' n  u 6-15 渲染缓冲区及framebuffer的关联对象
: N& p1 r; p( Z' X) j 6-16 在shader中使用shadow map
6-17 shader的数据准备
( R; Q5 w9 q0 U# u. y* |, n 6-18 绘制时进行shader的切换
" _* Y9 j7 K" v2 s- Q- R9 w* _ 6-19 threejs场景设置光照
& j3 t" F! k+ H* K* x2 @ 6-20 threejs场景增加背景和地面
7 \2 `8 e& p4 Y0 f% w 6-21 threejs场景增加阴影

3 D1 k8 C, i+ \9 R8 C. t; D第7章 基本游戏逻辑开发
  g, ~, X) E  F9 j& o$ Q- X在本章中，实现了基本游戏逻辑的开发，包括物理引擎、碰撞检测、跳跃逻辑等等模块，完成跳一跳游戏的基本功能
+ |5 s* d$ o6 }* a+ w 7-1 bottle绘制分析
: o$ Z' Y( t2 W: e5 P 7-2 bottle head部分的绘制
9 r7 [2 e* p2 v, U0 J 7-3 bottle bottom部分的绘制
8 {7 N9 K- }, _3 t" r2 R 7-4 bottle body部分的绘制
- t5 C8 L" G+ q 7-5 threejs纹理映射&bottle纹理高光
7-6 bottle head部分旋转
9 l7 a6 r* N5 U6 l 7-7 动画过程分析
7-8 动画库基本逻辑开发
7-9 线性动画的实现
7-10 ease mode的介绍和应用
. S, `; @, Y: Y, b 7-11 跳跃逻辑分析
7-12 跳跃模型旋转开发
7-13 bottle按压收缩的过程
4 g0 w; F1 q: w5 ?% g- t 7-14 block压缩开发
7-15 斜上抛运动过程分析
* K/ B; o1 q: q: v+ F3 N0 i, c) Y 7-16 斜上抛运动代码开发
7-17 碰撞检测（1）
. E+ F) \3 n7 y 7-18 碰撞检测（2）
7-19 使用pointInPolygon判断碰撞状态
7-20 实时碰撞检测
7-21 实时碰撞检测调试
7-22 nextBlock的更新逻辑
9 L$ \6 Y4 v$ Z 7-23 碰撞检测调试
) w% T. w) E# k' f$ z5 s% | 7-24 跳跃落地效果优化
' @) y3 @9 T' A2 s* ?6 `7 D 7-25 gameover重启游戏逻辑的开发
7-26 积分逻辑的开发
% K6 k' \  g* q4 F) n& f
第8章 版本迭代
% R1 B5 W3 N( ?3 g在本章中主要进行了声音的集成和动画细节的优化，深入实战了threejs的各种能力和微信小游戏的api，并且了解了游戏的开发字节，完成之后一个完整的跳一跳游戏功能的版本就完成了。
8-1 音频管理模块开发
' M9 m8 q( h* x2 P' |7 f7 x& Z 8-2 跳跃过程增加音效
" i$ D3 `$ }" Z 8-3 坠落逻辑补充+动画库升级停止所有动画能力
8-4 坠落动画的开发
2 _( v! g5 n1 d' V 8-5 block增加image纹理样式
1 |  u% ~, b* ?4 a( w3 z 8-6 彩色block的开发
8-7 粒子聚集效果
8-8 粒子散开效果
8-9 跳跃增加分数的动画
# l# i6 x% Y* W! X 8-10 跳跃轨迹的开发
. x# S$ E/ b7 I- E
$ m- \0 N) V( D