Three.js Game Skills
配套媒体
本页对应的 PPT 与演示视频
下载没反应？点这里复制直链
侧边栏预览窗口（Electron webview）会拦截下载，把下面的链接复制到 Chrome / Edge 地址栏打开即可保存。
../../threejs-game-skills-recommend.pptx../../threejs-game-skills-recommend.mp4本文目录
- 🚀 什么是 Three.js Game Skills？
- ✨ 9 个核心 Skill 一览
- 🛠️ 快速上手：1 小时跑通第一个游戏
- 5 步开发流水线
- 步骤 1：一键安装
- 步骤 2：召唤导演 Skill
- 步骤 3：内置 QA 自动质检
- 📊 与传统 Three.js 工具的差异
- 🏗️ 架构详解
- 三个层次
- 与 chubbyskills / Light-skills / compass-skills 的对比
- 🎮 5 个真实可玩 Demo 游戏
- 1. Neon Ridge Drift（赛车）
- 2. Championship Snooker Arena（台球）
- 3. Starship Dogfight（射击）
- 4. Tide Singer（音乐）
- 5. Ripcore（动作）
- 🤖 3 个可选 AI 资源 API
- 💡 适用场景
- 场景 1：独立游戏开发者快速原型
- 场景 2：前端工程师转 Web3D
- 场景 3：教学场景（学校/培训机构）
- 场景 4：Game Jam 48 小时极限开发
- 场景 5：AI 辅助工作流下的 Web3D 工程师
- 用户群体总结
- 💰 定价方案
- 🎯 总结
📌 核心价值：9 个 Agent Skill 让你"说人话"做 Three.js 游戏——director 自动调度 + 内置 QA 质检 + 5 个真实可玩 Demo
一句话：从此不用再纠结"用 Three.js 官方还是 react-three-fiber"——把游戏开发拆成 9 个可被 agent 调用的技能，director 一键路由，Vite + TS + Three.js 脚手架开箱即用，从空白文件夹到 Netlify 发布 ≤ 1 小时。
🚀 什么是 Three.js Game Skills？
Three.js Game Skills 是 GitHub 上一位独立开发者 Majid Manzarpour 在 6 月 14 日开源的 Three.js 游戏开发 Agent 技能包，专攻一件事——让 Codex / Claude Code 帮你"说人话"做可发布的 Three.js 浏览器游戏。
跟传统 Three.js 教程最大的区别是：它不是一份 API 文档，也不是一个游戏框架，而是把"做游戏"这件事拆成 9 个专项 Skill（导演/玩法/视觉/UI/调试/质检/三维/图像/音频），由 threejs-game-director 统一调度。
核心定位：9 个 Skill 端到端覆盖 Three.js 游戏全流程 + 内置 QA 截图证据 + 5 个真实可玩 Demo（赛车/台球/射击/音乐/动作）——这是 2026 年 AI 辅助 Web3D 游戏开发最完整的工具集
✨ 9 个核心 Skill 一览
1 个导演 + 5 个核心 + 3 个 AI 资源 = 9 个 Skill 端到端搞定 Three.js 游戏全流程
🛠️ 快速上手：1 小时跑通第一个游戏
5 步开发流水线
步骤 1：一键安装
Codex 用户：
npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a codex -g -y
Claude Code 用户：
npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y
本地开发：
./install.sh --all # 同时安装到 Codex + Claude Code
步骤 2：召唤导演 Skill
打开 Codex / Claude Code，用自然语言"召唤" director 技能：
Use threejs-game-director to build a premium futuristic tower defense game
from scratch. Automatically use the relevant gameplay, graphics, UI, asset
generation, audio, debug, and QA skills. Build a playable loop first, then
iterate until it passes browser, mobile, visual, UI, performance, and
release checks.
注意：director 会自动判断需要哪些子技能，你只管"说目标"
步骤 3：内置 QA 自动质检
threejs-qa-release 是项目的"质检员"，强制要求交付证据而非空口声明：
# 跑 canvas 像素检查（防"黑屏"假象）
node skills/threejs-qa-release/scripts/inspect-threejs-canvas.mjs \
--url http://127.0.0.1:5188 --mobile
- ✅ 浏览器 QA：本地启动开发服务器，验证页面
- ✅ 截图证据：Playwright 抓桌面/移动视口截图
- ✅ canvas 像素检查：防止空白/纯色假象
- ✅ 响应式检查：自动切换桌面/移动
- ✅ 性能快照：draw call / 三角形数 / 纹理 / 内存
- ✅ 生产构建：
npm run build验证无编译错误 - ✅ 发布风险报告：列出剩余风险和静态托管就绪度
📊 与传统 Three.js 工具的差异
关键差异：Three.js Game Skills 不是"Three.js 库的替代品"，而是"用 AI 制作 Three.js 游戏"的方法论和工作流
🏗️ 架构详解
三个层次
- 编排层：
threejs-game-director是唯一需要手动调用的入口技能，智能路由到所有子技能 - 核心技能层：5 个开箱即用的技能（玩法/视觉/UI/调试/质检），无需任何 API
- AI 资源层（可选）：3 个外部资源生成技能，需要 API key 但可大幅提升质量
与 chubbyskills / Light-skills / compass-skills 的对比
| Skill 包 | 垂直领域 | 数量 | 关键差异 |
|---|---|---|---|
| chubbyskills | 自媒体内容自动化 | 13 | 视频/小红书/公众号生成 |
| Light-skills | 科研全流程 | 28 | 论文/数据可视化/生信 |
| compass-skills | AI Agent 长任务 | 4 | 任务森林/记忆/DAG |
| Three.js Game Skills | 3D 浏览器游戏 | 9 | 导演调度 + 内置 QA + 5 个 Demo |
🎮 5 个真实可玩 Demo 游戏
不靠嘴说，靠 5 个 Netlify 部署的真实游戏证明 Skill 真能跑
1. Neon Ridge Drift（赛车）
- 链接：https://ridgedrift.netlify.app
- 风格：霓虹都市夜间赛车
- 用到 Skill：
gameplay-systems+aaa-graphics-builder+audio-generator
2. Championship Snooker Arena（台球）
- 链接：https://snookerarena.netlify.app
- 风格：写实台球物理
- 用到 Skill：
gameplay-systems（物理）+game-ui-designer（计分板）
3. Starship Dogfight（射击）
- 链接：https://starshipdogfight.netlify.app
- 风格：太空射击
- 用到 Skill：
3d-generator（Tripo 模型）+image-generator（Gemini 纹理）
4. Tide Singer（音乐）
- 链接：https://tidesinger.netlify.app
- 风格：节奏音游
- 用到 Skill：
audio-generator（ElevenLabs 音效）+aaa-graphics-builder
5. Ripcore（动作）
- 链接：https://ripcore.netlify.app
- 风格：高速动作
- 用到 Skill：
gameplay-systems（连招系统）+qa-release（移动端验证）
🤖 3 个可选 AI 资源 API
核心技能无 API 也能跑；这 3 个 API 是"加分项"
| Skill | 第三方服务 | 用途 | API Key |
|---|---|---|---|
threejs-3d-generator |
Tripo | 文本/图像转 3D 模型（GLB/FBX + 动画） | TRIPO_API_KEY |
threejs-image-generator |
Gemini | 概念图/纹理/天空/图标/GUI 艺术 | GEMINI_API_KEY |
threejs-audio-generator |
ElevenLabs | SFX/环境音/UI 音效/语音 TTS | ELEVENLABS_API_KEY |
安全提示：密钥必须放在环境变量中，绝不能提交到代码或浏览器端
💡 适用场景
场景 1：独立游戏开发者快速原型
- 痛点：3D 游戏从 0 到 1 涉及 9 个领域（玩法/视觉/UI/资源/音频/调试/QA/打包/发布），一个人搞不定
- 解决方案：召唤 director，自动调度 9 个 Skill，端到端完成
- 输出：1 个可发布到 Netlify 的 Three.js 游戏
场景 2：前端工程师转 Web3D
- 痛点：Three.js 学习曲线陡，材质/灯光/物理/性能调优都要学
- 解决方案：用 director 技能"说人话"指挥 agent，agent 自动调用专项 Skill
- 输出：Vite + TS + Three.js 完整工程脚手架 + 9 个 Skill 工具集
场景 3：教学场景（学校/培训机构）
- 痛点：3D 游戏开发教学资源稀缺，学生容易卡在某个环节
- 解决方案：用 director + 5 个 Demo 做"看效果 → 学源码 → 改参数"教学
- 输出：5 个可玩 Demo 源码 + 9 个 Skill 的 SKILL.md 教学文档
场景 4：Game Jam 48 小时极限开发
- 痛点：Game Jam 时间紧，需要快速产出可玩游戏
- 解决方案：用 director 30 分钟出可玩循环，剩余时间做视觉/UI 优化
- 输出：48 小时内可提交的 Game Jam 作品
场景 5：AI 辅助工作流下的 Web3D 工程师
- 痛点：Codex / Claude Code 用得多，但不知道怎么指挥 agent 做 3D 游戏
- 解决方案：把 director 当"项目经理"，把 9 个 Skill 当"团队成员"
- 输出：可验证的 Three.js 游戏 + 强制 QA 证据链
用户群体总结
- ✅ AI 辅助开发工程师：Codex/Claude Code 重度用户
- ✅ 独立游戏开发者：想做浏览器 3D 游戏但缺图形/UI 经验
- ✅ 前端工程师：想转型 Web3D 游戏开发
- ✅ 快速原型设计师：Game Jam / 概念验证 / 产品演示
- ✅ 技术艺术家：用 AI 生成 3D/图像/音频再整合
- ✅ 教学场景：现代 AI 辅助游戏开发工作流学习
- ❌ 不适合：纯 2D 游戏（用 Phaser/PixiJS 更合适）；纯 Unity/Unreal 项目
💰 定价方案
完全免费 + Apache 2.0 协议：
- 9 个 Skill 全部 MIT 开源
- 5 个 Demo 游戏免费试玩（Netlify 部署）
- 3 个 AI 资源 API 按需付费（Tripo/Gemini/ElevenLabs 各自计费）
开源协议： MIT
💡 新用户福利：从空文件夹到可发布游戏 ≤ 1 小时，无需任何付费 API（基础玩法/UI/调试/质检全部本地完成）
🎯 总结
Three.js Game Skills 重新定义了"AI 辅助 3D 游戏开发"——不是替代 Three.js，而是把"做游戏"这件事拆成 9 个可被 agent 调用的 Skill，由 director 统一调度，强制 QA 交付证据，5 个真实 Demo 证明可行性。
推荐指数： ⭐⭐⭐⭐⭐（满分5星）
适合人群：
- AI 辅助开发工程师（Codex/Claude Code 用户）
- 独立游戏开发者 / 前端工程师 / Game Jam 参赛者
- 想学"现代 AI 辅助 3D 游戏开发工作流"的任何人
立即体验：
- 5 个 Demo 游戏：ridgedrift.netlify.app / snookerarena.netlify.app / starshipdogfight.netlify.app / tidesinger.netlify.app / ripcore.netlify.app
GitHub 仓库： majidmanzarpour/threejs-game-skills
数据截至 2026-07-03，最新信息请以 GitHub 仓库为准。