3D游戏构建器免费版

功能说明: 本技能涵盖 化工作流场景 等核心能力。

3D 游戏构建器 (免费版)

概述

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

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

核心能力

核心功能执行

用input_params参数进行配置。

输出: 返回核心功能执行的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置。

输出: 返回参数配置与调用的执行结果,包含操作状态和输出数据。

• 执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置。

输出: 返回结果处理与输出的执行结果,包含操作状态和输出数据。

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：用自然语言生成可、玩的浏览器、小游戏、支持迭代修改与本、地预览、面向个人开发者与、游戏爱好者的、浏览器游戏生成工、核心能力、自然语言描述生成、Three、单文件输出、迭代修改、本地预览、适用场景、Game、Jam、快速原型、娱乐小游戏制作、创意展示、差异化、免费版支持单文件、游戏生成与基础迭、适合个人创作者与、原型验证、适用关键词、游戏生成、浏览器游戏、游戏原型、自然语言生成等。

使用场景

场景一: Game Jam 快速原型

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

用户: "做一个领先人称射击游戏,玩家在太空站里打外星人"

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

场景二: 学习 Three.js

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

# 生成一个简单的第三人称游戏
echo "第三人称视角的小猫收集星星的游戏" | game-builder

# 查看生成的代码
cat /tmp/game-build/index.html | head -100

场景三: 创意展示

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

# 启动本地服务器
bash "${SKILL_DIR}/scripts/serve.sh" /tmp/game-build

# 输出: http://localhost:8000

不适用场景

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

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

触发条件

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

快速开始

Step 1: 检查环境

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

Step 2: 生成领先个游戏

# 创建工作目录
mkdir -p /tmp/game-build

# 示例
echo "一个像素风格的塔防游戏" > /tmp/game-build/request.txt

Step 3: 启动本地预览

# 在游戏目录启动服务器
cd /tmp/game-build
python -m http.server 8000

# 打开浏览器访问 http://localhost:8000

Step 4: 迭代修改

用户: "把塔的颜色改成霓虹色,增加一种新的激光塔"

助手:
1. 读取现有 /tmp/game-build/index.html
2. 读取 /tmp/game-build/progress.md 了解当前状态
3. 识别为迭代请求 (修改现有游戏)
4. 使用 Edit 工具针对性修改:
   - 塔材质改为 emissive neon
   - 新增 LaserTower 类
5. 更新 progress.md 迭代历史
6. 刷新浏览器查看效果

结果处理: 执行完成后,查看输出结果确认操作状态。成功时输出包含处理摘要和结果数据;失败时根据错误信息排查问题,查阅错误处理章节获取恢复步骤。

配置示例

游戏生成模板

<!DOCTYPE html>


    
    [游戏标题]
    
    


    
    

摄像机与控制选择

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": "方向键 + 空格跳跃",
    },
}

进度跟踪模板

# 游戏进度

## 原始请求
[首次用户描述]

## 当前状态
[已构建且可工作的部分]

## 迭代历史
- [日期/序号]: [修改内容]

## 实体清单
- 玩家: [描述]
- 敌人: [列表]
- NPC: [列表]

## 已激活系统
- [x] 移动/控制
- [x] 战斗 (实时/回合)
- [ ] 物品栏
- [ ] 对话

## 已知问题
- [Bug 或待优化项]

## 建议下一步
- [可添加的新功能]

优选实践

1. 颜色可见性

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

// 错误: 地面几乎看不见
const floor = new THREE.MeshStandardMaterial({ color: 0x0a0a0a });

// 正确: 使用中色调
MeshStandardMaterial({ color: 0x4a6a4a }); // 草地
const stone = new THREE.MeshStandardMaterial({ color: 0x666688 }); // 石头
const dirt = new THREE.MeshStandardMaterial({ color: 0x887766 }); // 泥土

2. 第三人称相机移动

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

// 关键: 相对相机方向移动
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. 性能优化

// 使用 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 生成音效,无需外部资源。

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

依赖详情

API Key 配置

# 免费版无需额外 API Key
# Three.js 通过 CDN 加载,无需认证

# 可选: 配置本地服务器端口
export GAME_SERVER_PORT=8000

可用性分类

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

错误处理

已知限制

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

示例

基本用法

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

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

安全注意事项

使用前请确认已阅读依赖说明章节，确保运行环境满足安全要求。

效率量化分析

差异化对比