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

体系课

课程简介

这门课解决什么问题 “跳一跳”这类游戏的开发难点，不在于画出好看的 3D 场景，而在于处理点击蓄力、抛物线物理计算以及摄像机平滑跟随这一整套交互逻辑。市面上很多 Three.js 教程只停留在静态模型展示或简单的旋转动画，一旦涉及游戏状态管理和平台适配，往往语焉不详。本课程专门针对这一痛点，完整拆解从项目初始化到最终打包发布的每一步。它解决的核心问题是：如…

已有 0 人浏览发布 2026-10-17 更新 2026-10-18

这门课解决什么问题

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

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

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

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

建议学习路径与资料配合

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

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

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

课程目录

第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