这是一个面向 Codex 和 Claude Code 的 Three.js 浏览器游戏开发技能包。它不是传统游戏引擎或运行时库，而是一组可安装到 AI 编程代理中的“技能”，用于指导代理从零构建或改造 Three.js 游戏，包括玩法系统、AAA 风格图形、UI、调试、性能分析、QA 发布检查，以及可选的 AI 生成 3D、图片和音频资产。核心入口是 threejs-game-director，负责根据需求自动调用其他专项技能。
适用领域
Three.js 浏览器游戏开发 / AI Agent 辅助编程 / WebGL / 3D 图形 / 游戏原型与可玩 Demo 制作 / 游戏 UI / HUD 设计 / 游戏 QA 与发布验证 / AI 生成 3D 模型、图片、音频资产 / Vite + TypeScript + Three.js 项目脚手架
配置难度
中等。安装命令本身较简单，但要发挥价值需要开发者熟悉 Codex 或 Claude Code、Node.js 前端项目、Three.js 基础、浏览器调试和游戏开发常识。对于只想直接运行一个现成游戏的人来说不太适合；对于会使用 AI 编程工具的前端或游戏原型开发者，上手难度可接受。
商业价值
商业价值较高，尤其适合快速验证 Web 3D 游戏创意、制作互动营销 Demo、游戏 Jam 原型、独立游戏早期样片和产品展示。它可以把从玩法、视觉、UI 到 QA 的流程标准化，减少开发者反复提示 AI 的成本。对于小团队来说，可显著提升原型速度和完成度；但正式商业发布仍需要人工美术、性能优化、版权审核、代码审查和多设备测试。
01
技术亮点
- 以 threejs-game-director 作为统一入口，用户无需手动选择所有专项技能。
- 覆盖完整游戏开发流程：玩法、图形、UI、音频、调试、性能、QA 和发布。
- 自带 Vite + TypeScript + Three.js 脚手架，适合从空目录快速开始。
- 强调先建立可玩循环，再逐步打磨视觉、交互、性能和发布质量。
- 内置 QA 思路，包括 npm run build、本地浏览器运行、控制台错误检查、Playwright 截图、canvas 像素检查、移动端视口检查和交互检查。
- 对所谓 Premium / AAA 效果要求提供证据，例如视觉评分表、活动游戏截图和性能快照，避免只生成静态场景或占位方块。
- 支持可选 AI 资产管线，可接入 Tripo、Gemini 和 ElevenLabs。
- MIT 许可证，适合个人和商业项目参考或集成。
- 已有多个公开 Demo，说明该技能包可以产出可在线试玩的浏览器游戏。
02
目标用户
- 希望用 Codex 或 Claude Code 快速生成 Three.js 游戏的前端开发者
- 想从游戏想法快速做出可玩浏览器 Demo 的独立开发者
- 需要提升 Three.js 原型视觉质量、UI、性能和发布完整度的开发者
- 正在学习 Web 3D 游戏开发并希望获得结构化 AI 工作流的人
- 游戏 Jam、营销互动页面、WebGL 展示项目开发者
- 需要自动化 QA、截图、移动端适配检查的 Web 游戏团队
03
配置要求
- 核心 Three.js 游戏开发技能不强制需要付费 API Key。
- 如果不配置外部资产生成 API Key，系统应回退到程序化或本地资产方案。
- 可选环境变量 TRIPO_API_KEY：用于 Tripo API 生成 3D 模型、GLB/FBX、角色、车辆、道具、建筑、武器、贴图、绑定和动画。
- 可选环境变量 GEMINI_API_KEY：用于 Gemini 图片生成，生成概念图、纹理、贴花、天空盒、背景、图标、Logo 和 GUI 美术。
- 可选环境变量 ELEVENLABS_API_KEY：用于 ElevenLabs 生成音效、环境声、UI 声音、TTS、播报语音、对话或音频清理。
- macOS/Linux 可在 ~/.zshrc、~/.zprofile、~/.bashrc 或 ~/.bash_profile 中 export 对应变量。
- Windows PowerShell 可通过 $env:TRIPO_API_KEY = "..." 临时设置，或使用 [Environment]::SetEnvironmentVariable 持久设置。
- 不要将 API Key 提交到 Git，也不要写入浏览器端游戏代码。
- 若需要检查凭据，可运行：bash ~/.agents/skills/threejs-game-director/scripts/probe_asset_credentials.sh
04
适用场景
- 从空目录创建一个 Vite + TypeScript + Three.js 浏览器游戏
- 让 AI Agent 构建完整的可玩循环，例如赛车、塔防、太空射击、体育游戏等
- 将已有 Three.js 原型从简单方块场景升级为更精致的视觉效果
- 为游戏添加 HUD、菜单、移动端触控、安全区域和响应式布局
- 调试黑屏、运行时报错、加载失败、移动端适配问题和性能瓶颈
- 运行生产构建、浏览器验证、Playwright 截图、canvas 非空像素检查和发布风险报告
- 在配置 API Key 后通过 Tripo、Gemini、ElevenLabs 生成 3D 模型、概念图、纹理、音效、环境声或语音
- 为静态托管平台如 Netlify、Vercel、GitHub Pages 准备可发布的 Web 游戏
05
部署与配置
- 确保本机已安装 Node.js 和 npm，因为安装命令使用 npx skills。
- 安装到 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
- 如果当前 skills CLI 不支持 Claude Code 目标，可以克隆仓库后执行：./install.sh --claude
- 本地开发或手动安装时，克隆仓库后可执行：./install.sh --codex、./install.sh --claude 或 ./install.sh --all
- 如需覆盖已有同名技能，执行：./install.sh --codex --force
- 安装后，在空项目或现有 Three.js 项目中打开 Codex 或 Claude Code，并提示使用 threejs-game-director，例如：Use threejs-game-director to build a premium futuristic tower defense game from scratch.
06
风险与注意事项
- 项目本质是 AI Agent 技能包，不是可直接 npm install 后调用的游戏开发库；使用效果高度依赖 Codex、Claude Code 和当前 Agent 的能力。
- 生成代码质量、玩法手感和视觉结果可能不稳定，需要开发者审查、测试和二次调整。
- AAA 或 Premium 视觉目标对时间、资产、性能和模型质量要求较高，不能保证每次自动达到商业游戏级别。
- 外部 3D、图片、音频生成依赖第三方 API、额度、费用、网络和服务稳定性。
- AI 生成资产可能涉及版权、相似性、商用授权和内容合规风险，正式商用前需要人工审核。
- 浏览器 3D 游戏在移动端性能差异大，复杂材质、后处理、模型和纹理可能导致帧率下降。
- README 描述的 QA 流程需要 Agent 正确执行，开发者仍应自行做最终验收。
- 仓库语言标记为 Python，但实际使用场景更偏 Node.js、TypeScript、Three.js 和 Shell 脚本，可能让首次接触者产生误解。
2026-06-20
第17名
新收录 · github_search
