〖课程介绍〗:

通过使用Three.js开发“跳一跳”微信小游戏，以高仿真的实战，带你深入学习微信小游戏API、Three.js框架、Webgl，让你了解微信小游戏以及移动端的3D Web游戏是如何开发的，掌握这一类移动端3D小游戏的实现和性能优化

〖课程目录〗:

• 第1章 课程介绍 试看5 节 | 48分钟

• 
  

• 介绍了微信小游戏的概念以及相关的由来，从宏观上对于微信小游戏的定位和价值有一个明确的认识

• 
  

• 收起列表

• 
  

• 视频：1-1 导学介绍 (10:45)试看

• 视频：1-2 什么是微信小游戏 (13:02)试看

• 视频：1-3 微信小游戏与H5小游戏 (16:05)

• 视频：1-4 为什么要学习微信小游戏 (07:55)试看

• 作业：1-5 【讨论题】哪些游戏可以在微信小游戏平台上开发？

• 
  

• 第2章 微信小游戏平台与特性6 节 | 35分钟

• 
  

• 讲了微信小游戏平台的相关特性，包括微信小游戏工程的建立，微信小游戏开发工具的详细使用，以及微信小游戏相关API的实战等

• 
  

• 收起列表

• 
  

• 视频：2-1 微信开发者工具介绍 (04:22)

• 视频：2-2 小游戏项目工程初始模板建立 (02:48)

• 视频：2-3 微信开发者工具（模拟器介绍） (05:13)

• 视频：2-4 微信开发者工具（编辑器介绍） (10:24)

• 视频：2-5 微信开发者工具（调试器介绍） (12:00)

• 作业：2-6 【讨论题】微信小游戏是个什么样的平台？

• 
  

• 第3章 THREEJS与WebGL核心概念12 节 | 140分钟

• 
  

• 通过理论和实战，讲解了什么是Webgl、什么是threejs以及两者的关系，并且介绍了相关Webgl渲染管线的内容

• 
  

• 收起列表

• 
  

• 视频：3-1 什么是Webgl —— 理论部分（概念） (11:33)

• 视频：3-2 什么是Webgl —— 理论部分（GPU业务场景） (07:16)

• 视频：3-3 什么是Webgl —— 理论部分（如何对CPU进行编程） (13:07)

• 视频：3-4 Webgl实战shADer的创建和绑定 (14:08)

• 视频：3-5 Webgl实战静态三角形的绘制（1） (16:36)

• 视频：3-6 Webgl实战静态三角形的绘制（2） (15:28)

• 视频：3-7 Webgl实战旋转三角形的绘制 (13:09)

• 视频：3-8 Webgl实战动态的旋转三角形的绘制 (14:49)

• 作业：3-9 【讨论题】谈一谈纹理管理

• 视频：3-10 threejs理论部分 (08:02)

• 视频：3-11 threejs 绘制旋转三角形(场景渲染) (08:59)

• 视频：3-12 threejs绘制旋转三角形(动态效果) (16:47)

• 
  

• 第4章 项目结构7 节 | 74分钟

• 
  

• 对四个迭代版本，进行了详细的需求分析，并且对项目的整体结构进行了详细的介绍，包括项目目录设计、threejs框架在小游戏平台的集成、weAPP-ADapater源码分析和编译等

• 
  

• 收起列表

• 
  

• 视频：4-1 项目需求分析 (12:16)

• 视频：4-2 MVP项目结构 &AMp; 设计 &AMp;分析 (20:32)

• 视频：4-3 MVP基本项目结构搭建（引入Three.js） (10:59)

• 视频：4-4 小游戏平台（旋转三角实战） (16:48)

• 视频：4-5 小游戏平台（旋转三角实战完善） (04:46)

• 视频：4-6 MVP基本项目结构搭建完成 (07:48)

• 作业：4-7 【讨论题】我们常听到的页面交互相关的设计模式

• 
  

• 第5章 基本场景搭建（场景和视角）16 节 | 203分钟

• 
  

• 详细讲解了Webgl渲染管线中的视图矩阵和投影矩阵的推导，并且在Webg相关dEMO中进行了实现，进而实战了threejs的WebGLRenderer、Scene和CAMera，剖析其Webgl中对应的原理，并开发出跳一跳小游戏的整体场景布局

• 
  

• 收起列表

• 
  

• 视频：5-1 基本场景搭建 —— 本章核心内容 (03:26)

• 视频：5-2 基本场景渲染理解 (18:08)

• 视频：5-3 投影矩阵数学推导 (23:33)

• 视频：5-4 视图矩阵推导 (09:50)

• 视频：5-5 视图矩阵Webgl开发 (12:26)

• 视频：5-6 透视投影矩阵Webgl开发 (14:06)

• 视频：5-7 正交投影矩阵Webgl开发 (08:52)

• 作业：5-8 【学习任务】实现mvp矩阵（模型矩阵、视图矩阵、投影矩阵）

• 视频：5-9 mvc基础 (16:29)

• 视频：5-10 游戏page的搭建 (18:01)

• 视频：5-11 mvc中的event (03:39)

• 视频：5-12 2D画布绘制能力在threejs中的整合 (22:37)

• 视频：5-13 使用mvc完成页面切换 (12:52)

• 视频：5-14 scene和cAMera的设置 (24:33)

• 视频：5-15 es6的继承多态开发block (14:04)

• 作业：5-16 【讨论题】你了解 es6 中 class 的概念么?

• 
  

• 第6章 基本场景搭建（ 光照和阴影）23 节 | 276分钟

• 
  

• 从Webgl原理和实现和threejs光照和阴影实战，全方位的去讲解场景中的光照与阴影的搭建

• 
  

• 收起列表

• 
  

• 视频：6-1 cube的开发思路 (04:04)

• 视频：6-2 光照的原理 (23:31)

• 视频：6-3 索引绘制 (05:39)

• 视频：6-4 arraybuffer讲解 (09:42)

• 视频：6-5 cube的绘制 (22:43)

• 视频：6-6 平行光下的漫反射 (19:02)

• 视频：6-7 点光源下的漫反射 (06:09)

• 视频：6-8 phong模型漫反射下的球体的绘制 (12:00)

• 视频：6-9 纹理、阴影、帧缓冲区 理论 (14:40)

• 视频：6-10 Webgl砖块纹理实现（1） (13:42)

• 视频：6-11 Webgl砖块纹理实现（2） (17:35)

• 视频：6-12 Webgl砖块纹理实现（3） (14:37)

• 视频：6-13 shADow map对应shADer的开发 (14:02)

• 视频：6-14 新建frAMebuffer和对应的纹理 (05:30)

• 视频：6-15 渲染缓冲区及frAMebuffer的关联对象 (12:58)

• 视频：6-16 在shADer中使用shADow map (15:00)

• 视频：6-17 shADer的数据准备 (17:35)

• 视频：6-18 绘制时进行shADer的切换 (11:27)

• 视频：6-19 threejs场景设置光照 (10:53)

• 视频：6-20 threejs场景增加背景和地面 (15:13)

• 视频：6-21 threejs场景增加阴影 (09:08)

• 作业：6-22 【讨论题】单元测试的重要性以及如何为工程做好单元测试？

• 作业：6-23 用Webgl和threejs完成带阴影和纹理的旋转砖块开发

• 
  

• 第7章 基本游戏逻辑开发28 节 | 317分钟

• 
  

• 在本章中，实现了基本游戏逻辑的开发，包括物理引擎、碰撞检测、跳跃逻辑等等模块，完成跳一跳游戏的基本功能

• 
  

• 收起列表

• 
  

• 视频：7-1 bottle绘制分析 (06:56)

• 视频：7-2 bottle heAD部分的绘制 (17:34)

• 视频：7-3 bottle bottom部分的绘制 (06:09)

• 视频：7-4 bottle boDY部分的绘制 (13:02)

• 视频：7-5 threejs纹理映射&AMp;bottle纹理高光 (18:25)

• 视频：7-6 bottle heAD部分旋转 (03:27)

• 视频：7-7 动画过程分析 (10:41)

• 视频：7-8 动画库基本逻辑开发 (14:09)

• 视频：7-9 线性动画的实现 (13:36)

• 视频：7-10 ease mode的介绍和应用 (04:38)

• 视频：7-11 跳跃逻辑分析 (08:22)

• 视频：7-12 跳跃模型旋转开发 (14:51)

• 视频：7-13 bottle按压收缩的过程 (10:36)

• 视频：7-14 block压缩开发 (11:47)

• 视频：7-15 斜上抛运动过程分析 (07:02)

• 视频：7-16 斜上抛运动代码开发 (16:38)

• 作业：7-17 【学习任务】使用 threejs 完成 bottle 压缩弹

• 视频：7-18 碰撞检测（1） (15:57)

• 视频：7-19 碰撞检测（2） (15:11)

• 视频：7-20 使用POIntInPolyGon判断碰撞状态 (17:12)

• 视频：7-21 实时碰撞检测 (05:57)

• 视频：7-22 实时碰撞检测调试 (18:58)

• 视频：7-23 NEXTBlock的更新逻辑 (12:15)

• 视频：7-24 碰撞检测调试 (08:11)

• 视频：7-25 跳跃落地效果优化 (06:29)

• 视频：7-26 gAMeover重启游戏逻辑的开发 (19:29)

• 视频：7-27 积分逻辑的开发 (19:06)

• 作业：7-28 【讨论题】一个网页中多个渲染场景如何开发实现？

• 
  

• 第8章 版本迭代12 节 | 126分钟

• 
  

• 在本章中主要进行了声音的集成和动画细节的优化，深入实战了threejs的各种能力和微信小游戏的api，并且了解了游戏的开发字节，完成之后一个完整的跳一跳游戏功能的版本就完成了。

• 
  

• 收起列表

• 
  

• 视频：8-1 音频管理模块开发 (12:03)

• 视频：8-2 跳跃过程增加音效 (06:34)

• 视频：8-3 坠落逻辑补充+动画库升级停止所有动画能力 (12:59)

• 视频：8-4 坠落动画的开发 (13:42)

• 视频：8-5 block增加IMage纹理样式 (11:55)

• 视频：8-6 彩色block的开发 (09:32)

• 视频：8-7 粒子聚集效果 (25:09)

• 视频：8-8 粒子散开效果 (09:54)

• 作业：8-9 【学习任务】实现bottle周围的粒子效果

• 视频：8-10 跳跃增加分数的动画 (15:35)

• 视频：8-11 跳跃轨迹的开发 (08:07)

• 作业：8-12 【讨论题】threejs 渲染多少元素会开始卡顿？

• 
  

• 第9章 排行榜与发布13 节 | 96分钟

• 
  

• 在本章中主要进行了排行榜的开发，和游戏最终的一些调优，并打通游戏的发布流程，完成本章后跳一跳游戏全部的功能和打包就完成了。

• 
  

• 收起列表

• 
  

• 视频：9-1 开始游戏页面开发 (11:44)

• 视频：9-2 数据链中的开放数据域和主域的概念 (08:27)

• 视频：9-3 开放数据域实战 (11:26)

• 视频：9-4 使用sharedCanvas绘制排行榜 (17:55)

• 作业：9-5 【学习任务】使用小游戏中的sharedCanvas开发排行榜

• 视频：9-6 Webgl开发数据的性能问题 (05:08)

• 视频：9-7 内存分析 —— heap snaPShot (09:55)

• 视频：9-8 内存分析 —— 基于js function的allocation Profile (02:56)

• 视频：9-9 内存分析 —— 内存泄漏分析的allocation tIMeline (03:32)

• 视频：9-10 performance分析cpu、gpu和pAInting等过程 (12:48)

• 视频：9-11 预览和发布.. (08:45)

• 视频：9-12 小游戏其他内容 (02:51)

• 作业：9-13 【讨论题】你用chrome devtools做过哪些事情呢？

• 
  

• 第10章 课程总结2 节 | 9分钟

• 
  

• 对课程之前学习的内容进行总结，形成以threejs和微信小游戏两个技术块为核心的技术栈，全面形成3D开发的技术思维

• 
  

• 收起列表

• 
  

• 视频：10-1 本课程总结 (08:01)

• 作业：10-2 【讨论题】在本课程中你最大的收获是什么？

*声明：课程资源购自网络，版权归原作者所有，仅供参考学习使用，严禁外传及商用，若侵犯到您的权益请联系客服删除。