Three.js 网页 3D 游戏开发全教程｜手写组件化游戏引擎 + Jello City 实战

28 小时完整版 Three.js 硬核课程，从 WebGL 图形基础到组件化架构，亲手开发轻量游戏引擎，并完成 PC / 移动端互通的等距视角《Jello City》游戏。全程结合 AI 辅助编码，教你写出可维护、可扩展的工程化前端 3D 项目，零基础也能进阶网页 3D 工程师。

📌 课程介绍

《Learn Three.JS, Create a game engine, & The Jello city Game!》是一套工程化导向的网页 3D 游戏开发系统课程。由 Ahmed Fathy 主讲，不只是教 API 调用，而是带你从头实现组件化游戏引擎，并以此开发完整的《Jello City》等距视角游戏。内容覆盖 WebGL/WebGPU 渲染管线、Three.js 核心系统、相机控制、地形、角色移动、碰撞、选中、事件总线与跨端发布。课程采用 AI 辅助 + 手动编码结合模式，既保证速度又讲透原理，最终输出可上线 PWA 网页游戏项目。

✨ 课程核心优势

1. 做引擎而非只做游戏

从零搭建组件化架构，接近 Unity 工作流，学会一套可复用于任何项目的引擎结构。

2. 真正工程化、可维护

强调解耦、职责分离、事件总线、状态管理，代码可直接用于商业项目。

3. 等距视角全功能系统

地形、相机缩放平移、角色移动、碰撞避让、框选、网格对齐全部实现。

4. AI 辅助高效开发

合理使用 AI 完成重复代码，把精力放在逻辑与架构，学习更贴近真实工作。

📂 课程核心内容拆解

01 环境搭建与入门

• Three.js 基础与开发环境（VSCode、Node、Vite、Git）
• WebGL vs WebGPU、TS vs JS
• 第一个场景、相机、渲染器、动画循环

02 计算机图形学基础

• 顶点 / 片元着色器、光栅化流程
• UV、法线、纹理、变换顺序
• 透视 / 正交相机、窗口适配

03 Three.js 核心系统

• 几何体、材质、Mesh、父子层级
• 旋转顺序、变换优先级、太阳系案例
• 材质、光照、阴影基础

04 组件化游戏引擎架构

• 组件 + GameObject 模式
• 逻辑与视图分离
• 基类 Component/GameObject 实现

05 Jello City 主项目开发

• 地图生成、地形高度、斜坡区域
• 等距视角相机、缩放、平移、边界限制
• 角色（Jello）创建、移动、地形对齐、旋转适配

06 游戏核心系统

• 碰撞系统与碰撞避让
• 选中系统、框选、选中环效果
• 事件总线、输入映射、射线检测

07 发布与优化

• PWA 适配 PC 与移动端
• 性能优化、工程化规范
• 部署上线与版本管理

🎯 你将学到的核心技能

• 精通 Three.js 全流程开发与图形学原理
• 手写组件化游戏引擎，掌握架构设计
• 完成可上线《Jello City》网页 3D 游戏
• 实现地形、相机、移动、碰撞、选中全套系统
• 写出整洁、可扩展、可维护的前端 3D 代码
• 使用 AI 辅助高效开发，大幅提升效率

⚠️ 学习要求

• 了解至少一种编程语言（JS/TS 更佳）
• 基础面向对象概念：类、继承
• 基础向量、点积等线性代数常识
• 基础 HTML/CSS

👥 适合人群

• 想进入 3D 方向的前端 / 全栈开发者
• 想做网页游戏的独立游戏开发者
• 学习图形学的学生与工程师
• 需要搭建可视化 / 数字孪生项目的开发者

📝 课程总结

这是目前市面上最深度、最工程化的 Three.js 游戏开发课程。不教玩具 Demo，而是带你构建可商用的游戏引擎与完整项目，从图形学到架构再到发布全链路覆盖。配合中文字幕，国内开发者也能系统掌握网页 3D 核心能力，无论是做游戏、可视化、数字孪生、元宇宙项目，都能打下坚实底层基础。