用自然语言快速生成可玩的浏览器3D小游戏，支持单文件输出、迭代修改与本地预览，适合个人开发者和创意原型。
SKILL.md

---
slug: game-builder-tool-free
name: game-builder-tool-free
version: 1.0.0
displayName: 3D游戏构建器免费版
summary: 用自然语言生成可玩的浏览器3D小游戏,支持迭代修改与本地预览
license: Proprietary
edition: free
description: '面向个人开发者与游戏爱好者的 3D 浏览器游戏生成工具。

  核心能力: 自然语言描述生成游戏、Three.js 单文件输出、迭代修改、本地预览

  适用场景: Game Jam 快速原型、学习 Three.js、娱乐小游戏制作、创意展示

  差异化: 免费版支持单文件游戏生成与基础迭代,适合个人创作者与原型验证

  适用关键词: 3D游戏生成, Three.js, 浏览器游戏, 游戏原型, game jam, 自然语言生成'
tags:
- 游戏开发
- Three.js
- 创意工具
- 浏览器游戏
- 原型设计
tools:
- - read
- exec
homepage: https://skillhub.cn
pricing_tier: L3
pricing_model: per_use
suggested_price: 29.9
tools: ["read", "write", "exec"]
tags: "UI设计,前端,设计"
---
# 3D 游戏构建器 (免费版)

## 概述

本工具帮助个人开发者与游戏爱好者用自然语言描述快速生成可玩的浏览器 3D 游戏。只需一句话描述游戏概念,即可获得一个完整的单 HTML 文件,包含 Three.js 渲染、控制、物理、HUD、音效等完整游戏循环。支持迭代修改,用户可持续提出新需求让游戏逐步进化。

免费版聚焦个人创作场景,适合 Game Jam、学习 Three.js、创意原型验证等用途。

## 核心能力

| 能力模块 | 描述 | 免费版支持 |
|----|---|-----|
| 自然语言生成 | 从描述生成完整游戏 | 支持 |
| 单 HTML 输出 | 自包含可分享文件 | 支持 |
| 迭代修改 | 持续添加新功能 | 支持 |
| 本地预览 | 一键启动本地服务器 | 支持 |
| 多游戏类型 | FPS、RPG、竞速、塔防等 | 基础类型 |
| 参考图导入 | 用户上传图片作为参考 | 支持 |
| 多人联机 | 实时多人对战 | 不支持 (升级 PRO) |
| 资源托管 | 在线分享链接 | 24小时临时链接 |
| 高级图形 | PBR、SSAO、后处理 | 基础后处理 |
| 团队协作 | 多人共同开发 | 不支持 (升级 PRO) |

### 核心功能执行
用`input_params`参数进行配置。

**输入**: 用户提供核心功能执行所需的指令和必要参数。
**处理**: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回核心功能执行的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作

### 参数配置与调用
用`config_options`参数进行配置。

**输入**: 用户提供参数配置与调用所需的指令和必要参数。
**处理**: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回参数配置与调用的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`config_options`参数,支持修改/重置/导入操作

### 结果处理与输出
用`output_format`参数进行配置。

**输入**: 用户提供结果处理与输出所需的指令和必要参数。
**处理**: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回结果处理与输出的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`output_format`参数,支持导出/保存/转换操作
**能力覆盖范围**：本skill的核心能力覆盖以下场景关键词：用自然语言生成可、玩的浏览器、小游戏、支持迭代修改与本、地预览、面向个人开发者与、游戏爱好者的、浏览器游戏生成工、核心能力、自然语言描述生成、Three、单文件输出、迭代修改、本地预览、适用场景、Game、Jam、快速原型、娱乐小游戏制作、创意展示、差异化、免费版支持单文件、游戏生成与基础迭、适合个人创作者与、原型验证、适用关键词、游戏生成、浏览器游戏、游戏原型、自然语言生成等。

## 使用场景

### 场景一: Game Jam 快速原型

在 48 小时 Game Jam 中快速生成可玩原型。

```text
用户: "做一个第一人称射击游戏,玩家在太空站里打外星人"
# ...
助手:
1. 解析需求: FPS + 太空站场景 + 外星敌人
2. 生成单 HTML 文件 (包含):
   - PointerLockControls 第一人称视角
   - 程序化太空站走廊 (金属材质 + 荧光灯)
   - 外星敌人 FSM (巡逻 → 追击 → 攻击)
   - WASD 移动 + 鼠标视角 + 左键射击
   - HUD: 血量、弹药、得分
   - 程序化音效
3. 启动本地服务器预览
4. 提供迭代建议
```

### 场景二: 学习 Three.js

通过生成可读代码学习 Three.js 模式。

```bash
# 生成一个简单的第三人称游戏
echo "第三人称视角的小猫收集星星的游戏" | game-builder
# ...
# 查看生成的代码
cat /tmp/game-build/index.html | head -100
```

### 场景三: 创意展示

把想法快速变成可玩的交互演示。

```bash
# 启动本地服务器
bash "${SKILL_DIR}/（请参考skill目录中的脚本文件）" /tmp/game-build
# ...
# 输出: http://localhost:8000
```

## 不适用场景

以下场景3D游戏构建器免费版不适合处理：

- 无明确技术栈的模糊需求
- 纯架构设计决策
- 运维部署管理

## 触发条件

需要代码生成、编程辅助、调试测试、开发部署时使用。不适用于非本工具能力范围的需求。

## 快速开始

### Step 1: 检查环境

```bash
# 确保有现代浏览器与 Python (用于本地服务器)
python --version
which python3
```

### Step 2: 生成第一个游戏

```bash
# 创建工作目录
mkdir -p /tmp/game-build
# ...
# 示例
echo "一个像素风格的塔防游戏" > /tmp/game-build/request.txt
```

### Step 3: 启动本地预览

```bash
# 在游戏目录启动服务器
cd /tmp/game-build
python -m http.server 8000
# ...
# 打开浏览器访问 http://localhost:8000
```

### Step 4: 迭代修改

```text
用户: "把塔的颜色改成霓虹色,增加一种新的激光塔"
# ...
助手:
1. 读取现有 /tmp/game-build/index.html
2. 读取 /tmp/game-build/progress.md 了解当前状态
3. 识别为迭代请求 (修改现有游戏)
4. 使用 Edit 工具针对性修改:
   - 塔材质改为 emissive neon
   - 新增 LaserTower 类
5. 更新 progress.md 迭代历史
6. 刷新浏览器查看效果
```

**响应解析**: 完成完成后,查看输出响应确认任务状态。成功时输出包含解析摘要和响应数据;失败时根据错误信息排查问题,查阅错误解析章节获取恢复步骤。

## 配置示例

### 游戏生成模板

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>[游戏标题]</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; }
        #hud { position: fixed; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 10; }
    </style>
    <script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
        }
    }
    </script>
</head>
<body>
    <div id="hud"></div>
    <script type="module">
    // 游戏代码结构
    // 1. 导入
    // 2. 常量
    // 3. 数据定义
    // 4. 游戏状态
    // 5. 场景设置
    // 6. 资源工厂
    // 7. 玩家系统
    // 8. 实体系统
    // 9. 战斗系统
    // 10. HUD
    // 11. 主循环
    // 12. 事件监听
    </script>
</body>
</html>
```

### 摄像机与控制选择

```python
CAMERA_CONTROL_MAP = {
    "fps": {
        "camera": "PerspectiveCamera + PointerLockControls",
        "controls": "WASD + 鼠标视角 + 左键射击",
    },
    "third_person": {
        "camera": "PerspectiveCamera + 轨道相机",
        "controls": "WASD (相对相机) + 鼠标拖拽 + 点击动作",
    },
    "rpg_overworld": {
        "camera": "PerspectiveCamera + 俯视跟随",
        "controls": "WASD (相对相机) + E 交互",
    },
    "racing": {
        "camera": "PerspectiveCamera + 追逐相机",
        "controls": "WASD 或方向键",
    },
    "tower_defense": {
        "camera": "OrthographicCamera",
        "controls": "点击放置、点击移动",
    },
    "platformer": {
        "camera": "PerspectiveCamera + 侧视跟随",
        "controls": "方向键 + 空格跳跃",
    },
}
```

### 进度跟踪模板

```markdown
# 游戏进度
# ...
## 原始请求
[首次用户描述]
# ...
## 当前状态
[已构建且可工作的部分]
# ...
## 迭代历史
- [日期/序号]: [修改内容]
# ...
## 实体清单
- 玩家: [描述]
- 敌人: [列表]
- NPC: [列表]
# ...
## 已激活系统
- [x] 移动/控制
- [x] 战斗 (实时/回合)
- [ ] 物品栏
- [ ] 对话
# ...
## 已知问题
- [Bug 或待优化项]
# ...
## 建议下一步
- [可添加的新功能]
```

## 最佳实践

### 1. 颜色可见性

避免使用过暗的颜色导致场景不可见。

```javascript
// 错误: 地面几乎看不见
const floor = new THREE.MeshStandardMaterial({ color: 0x0a0a0a });
// ...
// 正确: 使用中色调
const floor = new THREE.MeshStandardMaterial({ color: 0x4a6a4a }); // 草地
const stone = new THREE.MeshStandardMaterial({ color: 0x666688 }); // 石头
const dirt = new THREE.MeshStandardMaterial({ color: 0x887766 }); // 泥土
```

### 2. 第三人称相机移动

第三人称游戏必须让 WASD 相对相机方向移动,而非世界坐标。

```javascript
// 关键: 相对相机方向移动
function updatePlayer(camera, keys, player) {
    const forward = new THREE.Vector3();
    camera.getWorldDirection(forward);
    forward.y = 0;
    forward.normalize();
// ...
    const right = new THREE.Vector3();
    right.crossVectors(forward, camera.up).normalize();
// ...
    const moveDir = new THREE.Vector3();
    if (keys.w) moveDir.add(forward);
    if (keys.s) moveDir.sub(forward);
    if (keys.a) moveDir.sub(right);
    if (keys.d) moveDir.add(right);
// ...
    moveDir.normalize().multiplyScalar(player.speed);
    player.position.add(moveDir);
}
```

### 3. 性能优化

```javascript
// 使用 InstancedMesh 处理重复对象
const treeGeometry = new THREE.ConeGeometry(0.5, 2, 8);
const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x2d5a27 });
const trees = new THREE.InstancedMesh(treeGeometry, treeMaterial, 500);
scene.add(trees);
// ...
// 对象池减少 GC
const bulletPool = [];
for (let i = 0; i < 100; i++) {
    bulletPool.push(createBullet());
}
```

### 4. 程序化音效

使用 Web Audio API 生成音效,无需外部资源。

```javascript
function playSound(frequency, duration, type = 'sine') {
    const ctx = new AudioContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = type;
    osc.frequency.value = frequency;
    osc.connect(gain);
    gain.connect(ctx.destination);
    gain.gain.setValueAtTime(0.3, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + duration);
    osc.start();
    osc.stop(ctx.currentTime + duration);
}
```

## 常见问题

### Q1: 生成的游戏能在手机上玩吗?

支持触控基础,但部分控制方案 (如 PointerLockControls) 仅在桌面端有效。移动端建议使用点击式控制。

### Q2: 可以使用外部 3D 模型吗?

免费版聚焦程序化资产 (Three.js 基础几何体组合)。导入 GLTF/FBX 模型需要 PRO 版本。

### Q3: 游戏文件多大?

简单游戏 50-200KB,复杂 RPG 可能达到 1-3MB (因为内联了所有代码)。

### Q4: 分享链接有效期多久?

免费版提供 24 小时临时分享链接。如需永久托管,请升级 PRO 版本。

### Q5: 支持哪些游戏类型?

FPS、第三人称动作、RPG、竞速、塔防、平台跳跃、解谜、生存、格斗等主流类型。

## 依赖说明

### 运行环境

- **Agent 平台**: 支持 SKILL.md 规范的任意 AI Agent (Claude Code、Cursor、Codex、Gemini CLI 等)
- **操作系统**: Windows / macOS / Linux
- **浏览器**: 现代浏览器 (Chrome 90+、Firefox 88+、Safari 14+)
- **网络**: 首次加载需访问 CDN (jsdelivr) 获取 Three.js

### 依赖详情

| 依赖项 | 类型 | 是否必需 | 获取方式 |
|:-----|:-----|:-----|:-----|
| Three.js 0.160.0 | JS 库 | 必需 | CDN 自动加载 |
| LLM API | 推理服务 | 必需 | 由 Agent 内置 LLM 提供 |
| Python 3.8+ | 本地服务器 | 可选 | python.org 下载 |
| 现代浏览器 | 运行时 | 必需 | 系统自带 |

### API Key 配置

```bash
# 免费版无需额外 API Key
# Three.js 通过 CDN 加载,无需认证
# ...
# 可选: 配置本地服务器端口
export GAME_SERVER_PORT=8000
```

### 可用性分类

- **分类**: MD+EXEC (Markdown 指令 + 命令行执行)
- **说明**: 本 Skill 通过自然语言指令驱动 Agent 生成 Three.js 单文件游戏,使用本地服务器预览
- **免费版限制**: 单文件输出、临时分享链接 (24h)、程序化资产、单人开发

## 错误处理

| 错误场景 | 原因 | 处理方式 |
|---:|---:|---:|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
| 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 |
| 网络错误 | 连接超时或不可达 | 执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案 |

## 已知限制

- 当前版本仅支持中文交互
- 部分高级功能需要额外配置
- 输出结果需人工审核后使用
- 不支持离线运行模式

## 示例

### 基本用法

**输入**：用户提供操作指令和必要参数

**输出**：返回执行结果,包含操作状态和输出数据

```text
用户: 执行核心功能
Skill: 正在执行核心功能...
Skill: 执行完成,结果如下: 操作成功
```

## 输出格式
```json
{
  "success": true,
  "data": {
    "result": "3D游戏构建器免费版处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "game builder"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}
```
Game Builder Tool Free

SKILL.md

related skills
