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

冰点也疯狂

第1章 课程介绍
3 [) Q" v# k2 [% \介绍了微信小游戏的概念以及相关的由来，从宏观上对于微信小游戏的定位和价值有一个明确的认识
( N) ^3 j1 ~  L: o 1-1 导学介绍
, j/ \5 Z: j8 j 1-2 什么是微信小游戏
! V4 B1 ^& ~( g) v( |# ? 1-3 微信小游戏与H5小游戏
8 W6 u- O$ E5 O$ j 1-4 为什么要学习微信小游戏
2 E& }; m6 \- }; W$ W3 k2 t
第2章 微信小游戏平台与特性
5 j( d& S/ O. j  i讲了微信小游戏平台的相关特性，包括微信小游戏工程的建立，微信小游戏开发工具的详细使用，以及微信小游戏相关API的实战等
5 H% w$ Q( ~' T, K+ b4 s* A: U 2-1 微信开发者工具介绍
2-2 小游戏项目工程初始模板建立
% l* T0 Y3 y; c# _- a: |0 l1 l0 W 2-3 微信开发者工具（模拟器介绍）
2-4 微信开发者工具（编辑器介绍）
2-5 微信开发者工具（调试器介绍）
" A( E; l, ], a7 d9 e, J. `6 \/ U
: }  J* |7 o3 l/ g. j# Z8 g第3章 THREEJS与WebGL核心概念
通过理论和实战，讲解了什么是webgl、什么是threejs以及两者的关系，并且介绍了相关webgl渲染管线的内容
4 t+ G! s- }% `3 F+ v, y 3-1 什么是webgl —— 理论部分（概念）
3-2 什么是webgl —— 理论部分（GPU业务场景）
3-3 什么是webgl —— 理论部分（如何对CPU进行编程）
3-4 webgl实战shader的创建和绑定
8 E. r; A& y0 c 3-5 webgl实战静态三角形的绘制（1）
3-6 webgl实战静态三角形的绘制（2）
. D7 }$ v0 j: B, b# e. y# ]# D 3-7 webgl实战旋转三角形的绘制
3-8 webgl实战动态的旋转三角形的绘制
3-9 threejs理论部分
3-10 threejs 绘制旋转三角形(场景渲染)
  y4 K% e  N9 i3 Y( L 3-11 threejs绘制旋转三角形(动态效果)
, r# w2 r4 G- `6 n
第4章 项目结构
6 I! k# ?. L$ n; @/ p/ |' _* ~$ }: L对四个迭代版本，进行了详细的需求分析，并且对项目的整体结构进行了详细的介绍，包括项目目录设计、threejs框架在小游戏平台的集成、weapp-adapater源码分析和编译等
3 V7 S! {* A/ `" {. h1 ~) y 4-1 项目需求分析
) a* l& @, l, n$ _8 ?5 d! W7 a 4-2 MVP项目结构 & 设计 &分析
, K# W+ u5 q# y1 }9 } 4-3 MVP基本项目结构搭建（引入three.js）
4-4 小游戏平台（旋转三角实战）
' R2 V9 P+ R. T: ~/ s 4-5 小游戏平台（旋转三角实战完善）
- r8 Y0 u( ]+ Z 4-6 MVP基本项目结构搭建完成
8 Z$ `9 v( d' q
+ N1 V0 T8 z  v& O! ~: o第5章 基本场景搭建（场景和视角）
详细讲解了webgl渲染管线中的视图矩阵和投影矩阵的推导，并且在webg相关demo中进行了实现，进而实战了threejs的WebGLRenderer、Scene和Camera，剖析其webgl中对应的原理，并开发出跳一跳小游戏的整体场景布局
5-1 基本场景搭建 —— 本章核心内容
5-2 基本场景渲染理解
4 R9 y4 v2 D# T( d( ~3 k& v+ a 5-3 投影矩阵数学推导
5-4 视图矩阵推导
0 B8 H' o, h, x. ?  j6 I. e 5-5 视图矩阵webgl开发
5-6 透视投影矩阵webgl开发
" C6 N( F6 k) H+ e( _  K& I* v: G" O 5-7 正交投影矩阵webgl开发
5-8 mvc基础
3 ^3 V3 M6 L% g# F/ N 5-9 游戏page的搭建
5-10 mvc中的event
5-11 2d画布绘制能力在threejs中的整合
5-12 使用mvc完成页面切换
" E: V# z7 l) F2 k2 Y 5-13 scene和camera的设置
5-14 es6的继承多态开发block

第6章 基本场景搭建（ 光照和阴影）
从webgl原理和实现和threejs光照和阴影实战，全方位的去讲解场景中的光照与阴影的搭建
6 b* F+ V9 `: @) m 6-1 cube的开发思路
' G% U* ~3 h( s& \/ P9 @- B0 S 6-2 光照的原理
6-3 索引绘制
6-4 arraybuffer讲解
6-5 cube的绘制
6-6 平行光下的漫反射
( i0 j( d4 l1 H( `; S 6-7 点光源下的漫反射
* A  {2 X5 L. a" K" M: \& K4 m 6-8 phong模型漫反射下的球体的绘制
4 |% E; w8 n( I% q/ }6 Y+ y5 Q0 g 6-9 纹理、阴影、帧缓冲区 理论
6-10 webgl砖块纹理实现（1）
, D- A8 {- P9 S7 @ 6-11 webgl砖块纹理实现（2）
6-12 webgl砖块纹理实现（3）
, Z! [5 U3 L0 F) `+ U 6-13 shadow map对应shader的开发
; [2 d0 u# v' `# F% O6 R1 G 6-14 新建framebuffer和对应的纹理
6-15 渲染缓冲区及framebuffer的关联对象
3 x/ X( p* M, k; o9 {9 V$ q( s 6-16 在shader中使用shadow map
6-17 shader的数据准备
( A+ ?' \# x  Z4 p# O6 d 6-18 绘制时进行shader的切换
6-19 threejs场景设置光照
6-20 threejs场景增加背景和地面
6-21 threejs场景增加阴影

3 Z% I, Q9 h& |$ @第7章 基本游戏逻辑开发
; }$ p2 O7 L9 E& r# A/ M在本章中，实现了基本游戏逻辑的开发，包括物理引擎、碰撞检测、跳跃逻辑等等模块，完成跳一跳游戏的基本功能
- D) u9 f2 u" q% F 7-1 bottle绘制分析
: V) @. b) N  {0 g+ |2 h 7-2 bottle head部分的绘制
, ]- C8 O! P; t8 w/ o8 P 7-3 bottle bottom部分的绘制
7-4 bottle body部分的绘制
% Y. G$ w6 ~( w$ v$ s 7-5 threejs纹理映射&bottle纹理高光
7-6 bottle head部分旋转
- c0 L" p, H# y3 v! }8 m. T 7-7 动画过程分析
9 ^9 c" _2 F7 |- l3 H 7-8 动画库基本逻辑开发
2 y' l, k0 p4 n; L6 v& p0 S& v 7-9 线性动画的实现
7-10 ease mode的介绍和应用
1 g9 s3 x3 C9 T 7-11 跳跃逻辑分析
7-12 跳跃模型旋转开发
% G' Q, ^  M/ W  n 7-13 bottle按压收缩的过程
7-14 block压缩开发
- _% U% }- g5 k 7-15 斜上抛运动过程分析
. s9 U4 T* A1 f; g0 m6 r* F 7-16 斜上抛运动代码开发
7-17 碰撞检测（1）
7-18 碰撞检测（2）
7-19 使用pointInPolygon判断碰撞状态
6 V% ?" J% k* m7 N1 j/ C/ N6 T 7-20 实时碰撞检测
7-21 实时碰撞检测调试
9 z6 \8 N2 n$ W- d 7-22 nextBlock的更新逻辑
4 E* j# r" V6 N& H0 J: Z 7-23 碰撞检测调试
  J; L+ S) [5 x. ?; ^) j 7-24 跳跃落地效果优化
& p% I$ G- o& x4 ~% T! R+ } 7-25 gameover重启游戏逻辑的开发
" ^! u5 M- u1 ^# ? 7-26 积分逻辑的开发
* C- P# h( E; G. K4 n
第8章 版本迭代
在本章中主要进行了声音的集成和动画细节的优化，深入实战了threejs的各种能力和微信小游戏的api，并且了解了游戏的开发字节，完成之后一个完整的跳一跳游戏功能的版本就完成了。
8-1 音频管理模块开发
8-2 跳跃过程增加音效
8-3 坠落逻辑补充+动画库升级停止所有动画能力
8-4 坠落动画的开发
/ R# p0 ~0 k$ n9 R$ W9 G4 g 8-5 block增加image纹理样式
8-6 彩色block的开发
8-7 粒子聚集效果
$ s  l+ e; E% ]' U- V 8-8 粒子散开效果
8-9 跳跃增加分数的动画
" g) x  H  Z' c& i# v& I 8-10 跳跃轨迹的开发
7 ?. E" x" z, [; ^3 g