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-skillsthreejs-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-builder3A 级画质建模、材质、光照、后期特效、视觉评分卡threejs-game-ui-designerHUD、菜单、响应式布局、移动端触控threejs-debug-profiler黑屏排查、运行时错误、性能分析threejs-qa-release浏览器实测、画布像素检查、发布风险报告threejs-3d-generator可选AI 生成 3D 模型GLB/FBXthreejs-image-generator可选AI 生成概念图、贴图、图标threejs-audio-generator可选AI 生成音效、环境音、语音每个技能都是自包含的带自己的 SKILL.md、参考资料、检查清单和辅助脚本安装后互不依赖AI 会自动按需加载。二、安装前准备只需 1 分钟✅Node.js18 及以上版本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.shgit 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 调用外部服务生成更高级的资产主角模型、天空贴图、音效只需在终端配置对应环境变量后重启终端服务商环境变量用途TripoTRIPO_API_KEY文字/图片生成 3D 模型纹理、绑定、动画GeminiGEMINI_API_KEY概念图、贴图、天空、图标、UI 美术ElevenLabsELEVENLABS_API_KEY音效、环境音、UI 音效、语音 TTS配置好之后无需改任何代码AI 的导演技能会先运行凭证探测脚本 probe_asset_credentials.sh 判断密钥是否可用可用就生成、不可用就自动回退到程序化资产并如实报告。⚠️ 切记密钥只放在环境变量里永远不要提交到仓库或写进游戏代码。六、常见问题FAQ问技能装到哪里了如何确认安装成功答Codex 在~/.codex/skills/Claude Code 在~/.claude/skills/。在 AI 里直接输入技能名如/threejs-game-director能触发说明安装成功。问如何升级我现有的 Three.js 游戏答在项目目录里对 AI 说使用 threejs-game-director 把这个游戏从原型画质升级到商业网页游戏品质输出视觉评分卡。 AI 会读取现有代码后针对性改进。问AI 生成的游戏如何测试答脚手架自带 Playwright 模板npm run test跑冒烟测试npm run verify:visual做视觉回归npm run inspect:canvas检查画布渲染详见 playtest-qa.md。问免费吗答技能包遵循 MIT 协议开源完全免费只有可选的 AI 资产生成服务需要各自的服务商密钥和额度。相关资源项目总览README.md导演技能主文档skills/threejs-game-director/SKILL.md阶段剧本AI 内部工作流skills/threejs-game-director/references/phase-playbook.md内置游戏脚手架skills/threejs-gameplay-systems/assets/threejs-vite-game/3A 视觉评分卡与校准图skills/threejs-aaa-graphics-builder/assets/scorecard-anchors/玩法手感调优指南skills/threejs-gameplay-systems/references/game-feel.md装好技能包打开一个空文件夹说出你想做的游戏——10 分钟后你的第一个 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考