10分钟快速上手：安装threejs-game-skills并让AI搭建你的第一个Three.js游戏-育师

10分钟快速上手：安装threejs-game-skills并让AI搭建你的第一个Three.js游戏

【免费下载链接】threejs-game-skillsAgent skills for building playable, polished Three.js browser games with gameplay, AAA-style graphics, UI, QA, and optional AI-generated 3D, image, and audio assets.项目地址: https://gitcode.com/gh_mirrors/th/threejs-game-skills

threejs-game-skills 是一个专为 Three.js 网页游戏打造的 AI 智能体技能包：安装后，你只需向 Codex 或 Claude Code 说一句话，AI 就会自动搭建一个可玩、可发布、带 HUD 和音效的 Three.js 游戏，并自行完成截图验证、移动端检查和性能审查。无需 API 密钥，核心功能全部免费。🎮

一、threejs-game-skills 是什么？

把它理解成"给 AI 的游戏开发团队"。一个技能包包含 9 个各司其职的专家技能，日常使用只需要记住一个入口：

技能	职责
`threejs-game-director`⭐	总导演，负责编排全流程，你只需点名它
`threejs-gameplay-systems`	玩法循环、关卡设计、手感调优、内置 Vite + TypeScript 游戏脚手架
`threejs-aaa-graphics-builder`	3A 级画质：建模、材质、光照、后期特效、视觉评分卡
`threejs-game-ui-designer`	HUD、菜单、响应式布局、移动端触控
`threejs-debug-profiler`	黑屏排查、运行时错误、性能分析
`threejs-qa-release`	浏览器实测、画布像素检查、发布风险报告
`threejs-3d-generator`	可选：AI 生成 3D 模型（GLB/FBX）
`threejs-image-generator`	可选：AI 生成概念图、贴图、图标
`threejs-audio-generator`	可选：AI 生成音效、环境音、语音

每个技能都是自包含的：带自己的 SKILL.md、参考资料、检查清单和辅助脚本，安装后互不依赖，AI 会自动按需加载。

二、安装前准备：只需 1 分钟

✅Node.js：18 及以上版本（npx命令需要）
✅一个 AI 运行器：Codex 或 Claude Code，二选一即可
✅不需要 API 密钥：核心技能完全免费，AI 会用程序化方式生成模型和资产；密钥只在你想用 AI 生成外部 3D/图片/音频时才需要（见第五节）

三、一键安装 threejs-game-skills（两种方法）

方法一：npx 命令一键安装（最快）

打开终端，根据你使用的 AI 运行器选择对应命令：

# 安装到 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

命令执行完即安装成功。技能会被写入~/.codex/skills或~/.claude/skills，两个运行器安装后都会自动发现。

方法二：克隆仓库 + install.sh 本地安装

如果 npx 命令在你的环境中不可用，可以克隆仓库后运行本地安装脚本 install.sh：

git clone https://gitcode.com/gh_mirrors/th/threejs-game-skills cd threejs-game-skills ./install.sh --codex # 安装到 Codex ./install.sh --claude # 安装到 Claude Code ./install.sh --all # 两个都装

安装脚本只会复制skills/目录，遇到同名技能会自动跳过，加--force参数可强制覆盖，绝不会误删你自己的其他技能，非常安全。

四、10 分钟搭建你的第一个 Three.js 游戏

第 1 步：准备一个空文件夹

新建一个空目录（比如my-first-game），用 Codex 或 Claude Code 打开它。也可以直接在已有的 Three.js 项目里打开，让 AI 升级它。

第 2 步：向 AI 说出你的游戏需求

只需一句话，点名"导演"技能即可。推荐直接用官方示例提示词：

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.

中文环境也可以说："使用 threejs-game-director，从零搭建一个赛博朋克风格的无尽跑酷游戏，要求可玩、带 HUD、支持桌面和移动端，完成前跑完全部验证。"

提示词里想加什么就加什么：美术风格、游戏类型、操作方式、"达到 3A 级画质"等。

第 3 步：等待 AI 自动完成全流程

AI 会按阶段推进，全程无需你干预：

写设计简报：核心循环、关卡计划、操作方案
搭项目骨架：自动使用内置的 Vite + TypeScript + Three.js 脚手架（见 create_threejs_game.py），带确定性测试钩子和随机数种子
实现玩法：输入、实体、碰撞、计分、相机
打磨画质与 UI：按视觉评分卡十类逐项达标
自验证：构建、浏览器实测、截图、画布非空白像素检查、移动端视口检查，全部通过才报告完成

最终你会得到一个可直接部署的完整游戏工程，包含构建、测试、画布检查脚本，AI 还会附上验证报告和剩余风险清单。

五、进阶玩法：可选 AI 生成 3D 模型、图片和音效

核心技能无需密钥即可工作。如果你想让 AI 调用外部服务生成更高级的资产（主角模型、天空贴图、音效），只需在终端配置对应环境变量后重启终端：

服务商	环境变量	用途
Tripo	`TRIPO_API_KEY`	文字/图片生成 3D 模型，纹理、绑定、动画
Gemini	`GEMINI_API_KEY`	概念图、贴图、天空、图标、UI 美术
ElevenLabs	`ELEVENLABS_API_KEY`	音效、环境音、UI 音效、语音 TTS

配置好之后无需改任何代码，AI 的导演技能会先运行凭证探测脚本 probe_asset_credentials.sh 判断密钥是否可用，可用就生成、不可用就自动回退到程序化资产并如实报告。⚠️ 切记：密钥只放在环境变量里，永远不要提交到仓库或写进游戏代码。