跳到正文
阅读原文
AI for Frontend · 微信公众号·· 8 小时前精选AI 评分73

video-to-game 开源项目：用视频模型设计、Coding Agent 实现可玩的 Three.js 小游戏

Video to Game：把一段视频变成可玩的 Three.js 小游戏

阅读原文
AI 导读

开源项目 video-to-game 把视频生成与 Coding Agent 结合，先由 MiniMax H3 Max 或 Seedance 2.5 在 fal 上生成 10–15 秒玩法视频定义镜头与风格，再由 Claude Code、Codex、Cursor、Gemini 等 Agent 拆解关键帧并实现为纯 Three.js 单文件 index.html。

推荐理由

原文拆解了视频定设计、Agent 做实现的完整流水线和安装方法，读者可以复用这套思路批量产出风格统一的小游戏。

正文

原创 前端设计大神 2026-10-29 12:00 北京

将视频直接生产3D游戏

最近在 GitHub 上看到一个很有意思的项目：video-to-game。

它的核心思路很简单，但执行得非常完整：

先用视频模型设计出游戏的“样子”和核心玩法，再用 Coding Agent 把它完整实现成可在浏览器里玩的 Three.js 游戏。

作者是 Lovis Odin（@OdinLovis），目前在 fal.ai 工作。他把这套流程做成了一个可安装的 Skill，支持 Claude Code、Codex、Cursor、Gemini 等主流 Coding Agent。

这个项目到底做了什么？

传统让 AI 写小游戏的问题很明显：
Agent 写代码没问题，但设计感很差——灰盒子、默认天空、镜头跟手打架，整体看起来像“能跑的技术演示”，而不是“想玩的小游戏”。

video-to-game 的解法是：

  1. 视频模型先做设计

    用 MiniMax H3 Max（或 Seedance 2.5）在 fal 上生成一段 10–15 秒的“玩法视频”。这段视频本身就定义了镜头、美术风格、角色、核心交互和氛围。

  2. Agent 把视频当成设计文档

    • 用脚本把视频拆成关键帧、色板、接触表（contact sheet）

    • Agent 据此写出详细的游戏规格（镜头、主角、唯一核心机制、关键时刻、整体 Look）

    • 所有资产（概念图、抠图、3D 模型、动画、音效、音乐）全部通过 fal 生成，严格对齐原视频风格

    • 最终输出一个纯 Three.js 的单文件 index.html（没有引擎、没有模板、没有其他库）

  3. 自己玩自己测

    Agent 会用键盘场景模拟玩家操作，录制自己的游玩过程，再挑出最精彩的几秒作为证明。卡死、掉落、无聊段落都会在交付前被修掉。

目前已经公开了 31 个完整小游戏，平均每个大约花费 6 美元（全部 31 个总计约 202 美元，共 1013 次 fal 调用）。所有游戏都可以在线直接玩：

👉 https://fal-video-to-game.vercel.app

几个很有代表性的例子

  • Skyfarer

    信差男孩在云层中滑翔，穿梭于巨型飞鲸之间

  • Paper Dragon

    女孩骑着红色纸龙风筝穿越秋天峡谷

  • Tidebound

    双人合作驾驶由粉色珊瑚长成的活体船

  • Clockwork Heist

    四人合作在巨大钟楼里偷东西

  • Kintsugi Mountain

    小和尚走在水墨山路上，每一步都绽出金箔

风格跨度很大，有水墨、粉彩、写实、卡通、低多边形……但共同点是：视觉和玩法都高度统一，而且真的能玩。

为什么这个方向值得关注？

  1. 把“设计”和“实现”解耦了

    视频模型擅长生成有情绪、有镜头感、有风格的画面；Coding Agent 擅长把清晰规格变成可运行的代码。两者分工明确，结果明显好于“直接让 AI 从头写游戏”。

  2. 资产全自动、风格严格对齐

    所有图片、3D、音频都从原视频帧派生，再通过 Nano Banana Pro、Meshy、Tripo、Hunyuan 3D 等模型生成，几乎没有“手绘”或“随便找素材”的环节。

  3. 交付物极度干净

    每个游戏就是一个独立的 index.html + Three.js，加载快、可嵌入、可二次修改，非常适合做原型、做展示、做教学案例。

  4. 可复用的 Skill 形态

    不是一次性脚本，而是可安装的 Agent Skill。你只需要提供一段玩法视频（或直接用仓库里的 prompt），就能让 Agent 走完整套流程。

怎么用？

Claude Code：

Bash

claude plugin marketplace add lovisdotio/video-to-game
claude plugin install video-to-game@video-to-game

其他 Agent（Codex / Cursor / Gemini 等）：

Bash

npx skills add lovisdotio/video-to-game

依赖主要是 Python 3.9+、ffmpeg、Node 18+（带 playwright-core），以及 fal 的 API Key。

写在最后

video-to-game 不是“又一个 AI 写游戏的玩具”，而是一次比较完整的视频 → 可玩交互流水线实验。它证明了：在当前模型能力下，只要把“设计权”交给视频模型，把“实现权”交给 Coding Agent，并强制做风格对齐和自动 playtest，就能批量产出真正能玩、且视觉统一的小游戏。

这个思路跟我目前复刻别人的思路完全一致，目前已经复刻了几十款产品和游戏。可以在这里体验。

https://avatarstar.cn/crowdfund/web/index.html

项目地址：

https://github.com/lovisdotio/video-to-game
在线试玩：

https://fal-video-to-game.vercel.app

感兴趣的话可以直接去玩几个，感受一下“从一段视频长出来的游戏”到底是什么感觉。

关于作者

做一只爬的最久的乌龟，保持学习保持好奇，即使慢一点，遇到一点困难，只要最后能到达终点，又有什么关系呢。

毕竟人生没有白走的路，每一步都算数

跳转微信打开

来源：AI for Frontend · 微信公众号 · mp.weixin.qq.com

#教程/实践#Agent#编码