这门课解决什么问题

“跳一跳”这类游戏的开发难点，不在于画出好看的 3D 场景，而在于处理点击蓄力、抛物线物理计算以及摄像机平滑跟随这一整套交互逻辑。市面上很多 Three.js 教程只停留在静态模型展示或简单的旋转动画，一旦涉及游戏状态管理和平台适配，往往语焉不详。本课程专门针对这一痛点，完整拆解从项目初始化到最终打包发布的每一步。它解决的核心问题是：如何让开发者从零开始，用纯前端技术实现一个具备完整核心玩法、且能在微信小游戏环境流畅运行的 3D 互动应用，填补了“能渲染”与“能做游戏”之间的技术空白。

适合什么基础、学完能做什么

本课程对零基础新手并不友好。学习者需要具备扎实的 JavaScript 语法基础，理解异步编程和基本的数据结构，同时最好已经通过入门教程熟悉 Three.js 的基本概念，比如什么是 Scene、Camera 和 Renderer。如果你还在为“为什么物体不动”而纠结坐标轴方向，建议先回顾基础 API。

系统学完并动手敲完代码后，你将能够独立负责中小型 3D 小游戏的前端开发。具体产出包括：掌握点击事件与物理引擎的结合技巧，实现精准的蓄力跳跃手感；学会使用 WebGL 优化渲染性能，避免在移动端出现卡顿；能够独立完成微信小游戏的代码包体积控制与分包加载策略。这些能力不仅适用于休闲游戏，同样可以迁移到 3D 产品展示、互动营销 H5 等高价值商业场景中。

建议学习路径与资料配合

不要试图通过被动观看视频来掌握这门技能，必须配合资料包中的工程源码进行实践。建议的学习顺序是：首先完整运行一遍官方 Demo，建立对最终成品的直观认知；其次，对照视频逐行阅读核心逻辑代码，重点理解“状态机”是如何管理等待、蓄力、飞行、落地等不同游戏阶段的；最后，尝试修改场景参数，比如调整重力加速度或更换贴图，观察物理反馈的变化。

资料包中通常包含完整的工程目录和素材资源。在使用时，严禁直接复制粘贴代码而不理解其原理。对于“摄像机跟随”和“碰撞检测”这两个核心模块，建议先自己推导逻辑，再对照源码修正。如果遇到报错，优先查看控制台的错误信息，而不是直接跳过。此外，务必重视最后的性能优化章节，这是区分“玩具”与“产品”的关键。只有亲手将项目部署到微信开发者工具并测试运行，才算真正完成了这门课的学习闭环。

课程目录

第10章 课程总结【微信-rmshou-收集整理】/ 10-1 本课程总结【微信-rmshou-收集整理】[2].mp4
 第1章 课程介绍【微信-rmshou-收集整理】/ 1-1 导学介绍【微信-rmshou-收集整理】[2].mp4
 1-2 什么是微信小游戏[2].mp4
 1-3 微信小游戏与H5小游戏[2].mp4
 1-4 为什么要学习微信小游戏[2].mp4
 第2章 微信小游戏平台与特性/ 2-1 微信开发者工具介绍_微信-rmshou-收集整理[2].mp4
 2-2 小游戏项目工程初始模板建立【微信-rmshou-收集整理】[2].mp4
 2-3 微信开发者工具（模拟器介绍）_微信-rmshou-收集整理[2].mp4
 2-4 微信开发者工具（编辑器介绍）_微信-rmshou-收集整理[2].mp4
 2-5 微信开发者工具（调试器介绍）_微信-rmshou-收集整理[2].mp4
 第3章 THREEJS与WebGL核心概念【微信-rmshou-收集整理】/ 3-1 什么是webgl —— 理论部分（概念）【微信-rmshou-收集整理】[2].mp4
 3-

10 threejs 绘制旋转三角形(场景渲染)【微信-rmshou-收集整理】[2].mp4
 3-11 threejs绘制旋转三角形(动态效果)【微信-rmshou-收集整理】[2].mp4
 3-2 什么是webgl —— 理论部分（GPU业务场景）【微信-rmshou-收集整理】[2].mp4
 3-3 什么是webgl —— 理论部分（如何对CPU进行编程）【微信-rmshou-收集整理】[2].mp4
 3-4 webgl实战shader的创建和绑定【微信-rmshou-收集整理】[2].mp4
 3-5 webgl实战静态三角形的绘制（1）【微信-rmshou-收集整理】[2].mp4
 3-6 webgl实战静态三角形的绘制（2）【微信-rmshou-收集整理】[2].mp4
 3-7 webgl实战旋转三角形的绘制【微信-rmshou-收集整理】[2].mp4
 3-8 webgl实战动态的旋转三角形的绘制【微信-rmshou-收集整理】[2].mp4
 3-9 threejs理论部分【微信-rmshou-收集整理】[2].mp4
 第4章 项目结构【微信-rmshou-收集整理】/ 4-1 项目需求分析【微信-rmshou-收集整理】[2].mp4
 4-2 MVP项目结构 & 设计 &分析【微信-rmshou-收集整理】[2].mp4
 4-3 MVP基本项目结构搭建（引入three.js）【微信-rmshou-收集整理】[2].mp4
 4-4 小游戏平台（旋转三角实战）【微信-rmshou-收集整理】[2].mp4
 4-5 小游戏平台（旋转三角实战完善）【微信-rmshou-收集整理】[2].mp4
 4-6 MVP基本项目结构搭建完成【微信-rmshou-收集整理】[2].mp4
 第5章 基本场景搭建（场景和视角）【微信-rmshou-收集整理】/ 5-1 基本场景搭建 —— 本章核心内容【微信-rmshou-收集整理】[2].mp4
 5-10 mvc中的event【微信-rmshou-收集整理】[2].mp4
 5-11 2d画布绘制能力在threejs中的整合【微信-rmshou-收集整理】[2].mp4
 5-12 使用mvc完成页面切换【微信-rmshou-收集整理】[2].mp4
 5-13 scene和camera的设置【微信-rmshou-收集整理】[2].mp4
 5-14 es6的继承多态开发block【微信-rmshou-收集整理】[2].mp4
 5-2 基本场景渲染理解【微信-rmshou-收集整理】[2].mp4
 5-3 投影矩阵数学推导【微信-rmshou-收集整理】[2].mp4
 5-4 视图矩阵推导【微信-rmshou-收集整理】[2].mp4
 5-5 视图矩阵webgl开发【微信-rmshou-收集整理】[2].mp4
 5-6 透视投影矩阵webgl开发【微信-rmshou-收集整理】[2].mp4
 5-7 正交投影矩阵webgl开发【微信-rmshou-收集整理】[2].mp4
 5-8 mvc基础【微信-rmshou-收集整理】[2].mp4
 5-9 游戏page的搭建【微信-rmshou-收集整理】[2].mp4
 第6章 基本场景搭建（ 光照和阴影）【微信-rmshou-收集整理】/ 6-1 cube的开发思路【微信-rmshou-收集整理】[2].mp4
 6-10 webgl砖块纹理实现（1）【微信-rmshou-收集整理】[2].mp4
 6-11 webgl砖块纹理实现（2）【微信-rmshou-收集整理】[2].mp4
 6-12 webgl砖块纹理实现（3）【微信-rmshou-收集整理】[2].mp4
 6-

13 shadow map对应shader的开发【微信-rmshou-收集整理】[2].mp4
 6-14 新建framebuffer和对应的纹理【微信-rmshou-收集整理】[2].mp4
 6-15 渲染缓冲区及framebuffer的关联对象【微信-rmshou-收集整理】[2].mp4
 6-

16 在shader中使用shadow map【微信-rmshou-收集整理】[2].mp4
 6-17 shader的数据准备【微信-rmshou-收集整理】[2].mp4
 6-18 绘制时进行shader的切换【微信-rmshou-收集整理】[2].mp4
 6-19 threejs场景设置光照【微信-rmshou-收集整理】[2].mp4
 6-2 光照的原理【微信-rmshou-收集整理】[2].mp4
 6-20 threejs场景增加背景和地面【微信-rmshou-收集整理】[2].mp4
 6-21 threejs场景增加阴影【微信-rmshou-收集整理】[2].mp4
 6-3 索引绘制【微信-rmshou-收集整理】[2].mp4
 6-4 arraybuffer讲解【微信-rmshou-收集整理】[2].mp4
 6-5 cube的绘制【微信-rmshou-收集整理】[2].mp4
 6-6 平行光下的漫反射【微信-rmshou-收集整理】[2].mp4
 6-7 点光源下的漫反射【微信-rmshou-收集整理】[2].mp4
 6-8 phong模型漫反射下的球体的绘制【微信-rmshou-收集整理】[2].mp4
 6-9 纹理、阴影、帧缓冲区 理论【微信-rmshou-收集整理】[2].mp4
 同类型课程.jpg 第7章 基本游戏逻辑开发【微信-rmshou-收集整理】/ 7-1 bottle绘制分析【微信-rmshou-收集整理】[2].mp4
 7-

10 ease mode的介绍和应用【微信-rmshou-收集整理】[2].mp4
 7-11 跳跃逻辑分析【微信-rmshou-收集整理】[2].mp4
 7-12 跳跃模型旋转开发【微信-rmshou-收集整理】[2].mp4
 7-13 bottle按压收缩的过程【微信-rmshou-收集整理】[2].mp4
 7-14 block压缩开发【微信-rmshou-收集整理】[2].mp4
 7-15 斜上抛运动过程分析【微信-rmshou-收集整理】[2].mp4
 7-16 斜上抛运动代码开发【微信-rmshou-收集整理】[2].mp4
 7-17 碰撞检测（1）【微信-rmshou-收集整理】[2].mp4
 7-18 碰撞检测（2）【微信-rmshou-收集整理】[2].mp4
 7-19 使用pointInPolygon判断碰撞状态【微信-rmshou-收集整理】[2].mp4
 7-2 bottle head部分的绘制【微信-rmshou-收集整理】[2].mp4
 7-20 实时碰撞检测【微信-rmshou-收集整理】[2].mp4
 7-21 实时碰撞检测调试【微信-rmshou-收集整理】[2].mp4
 7-22 nextBlock的更新逻辑【微信-rmshou-收集整理】[2].mp4
 7-23 碰撞检测调试【微信-rmshou-收集整理】[2].mp4
 7-24 跳跃落地效果优化【微信-rmshou-收集整理】[2].mp4
 7-25 gameover重启游戏逻辑的开发【微信-rmshou-收集整理】[2].mp4
 7-26 积分逻辑的开发【微信-rmshou-收集整理】[2].mp4
 7-3 bottle bottom部分的绘制【微信-rmshou-收集整理】[2].mp4
 7-4 bottle body部分的绘制【微信-rmshou-收集整理】[2].mp4
 7-5 threejs纹理映射&bottle纹理高光【微信-rmshou-收集整理】[2].mp4
 7-6 bottle head部分旋转【微信-rmshou-收集整理】[2].mp4
 7-7 动画过程分析【微信-rmshou-收集整理】[2].mp4
 7-8 动画库基本逻辑开发【微信-rmshou-收集整理】[2].mp4
 7-9 线性动画的实现【微信-rmshou-收集整理】[2].mp4
 第8章 版本迭代【微信-rmshou-收集整理】/ 8-1 音频管理模块开发【微信-rmshou-收集整理】[2].mp4
 8-10 跳跃轨迹的开发【微信-rmshou-收集整理】[2].mp4
 8-2 跳跃过程增加音效【微信-rmshou-收集整理】[2].mp4
 8-3 坠落逻辑补充+动画库升级停止所有动画能力【微信-rmshou-收集整理】[2].mp4
 8-4 坠落动画的开发【微信-rmshou-收集整理】[2].mp4
 8-5 block增加image纹理样式【微信-rmshou-收集整理】[2].mp4
 8-6 彩色block的开发【微信-rmshou-收集整理】[2].mp4
 8-7 粒子聚集效果【微信-rmshou-收集整理】[2].mp4
 8-8 粒子散开效果【微信-rmshou-收集整理】[2].mp4
 8-9 跳跃增加分数的动画【微信-rmshou-收集整理】[2].mp4
 第9章 排行榜与发布【微信-rmshou-收集整理】/ 9-1 开始游戏页面开发【微信-rmshou-收集整理】[2].mp4
 9-10 预览和发布..【微信-rmshou-收集整理】[2].mp4
 9-11 小游戏其他内容【微信-rmshou-收集整理】[2].mp4
 9-2 数据链中的开放数据域和主域的概念【微信-rmshou-收集整理】[2].mp4
 9-3 开放数据域实战【微信-rmshou-收集整理】[2].mp4
 9-4 使用sharedCanvas绘制排行榜【微信-rmshou-收集整理】[2].mp4
 9-5 webgl开发数据的性能问题【微信-rmshou-收集整理】[2].mp4
 9-6 内存分析 —— heap snapshot【微信-rmshou-收集整理】[2].mp4
 9-7 内存分析 —— 基于js function的allocation profile【微信-rmshou-收集整理】[2].mp4
 9-8 内存分析 —— 内存泄漏分析的allocation timeline【微信-rmshou-收集整理】[2].mp4
 9-9 performance分析cpu、gpu和painting等过程【微信-rmshou-收集整理】[2].mp4
 课程资料/ 代码资料.zip