Claude Fable 5.2 发布这一周，最出彩的几款游戏都是在浏览器里运行的，而且大多是 3D。Kevin Ngo 的 What the Water Keeps 用的是 Three.js；Anthropic 工程师 Felix Rieseberg 的 Saltline 里，每个模型、贴图和音效都是代码生成的。这篇教程把这些项目的共同做法整理成一套流程，照着做就能开始你自己的 Three.js 游戏。

需要准备什么

  • 能用 Claude Fable 5.2。 Claude 应用、Claude Code 里都有，API 的模型 ID 是 claude-fable-5-2。Pro 套餐和 Team 标准席位里，Fable 最多可以用掉每周额度的一半；走 API 的话，价格是每百万输入 token 8 美元、每百万输出 token 40 美元。
  • 一个智能体工具，而不是聊天窗口。 只要不是玩具级的小东西，就用 Claude Code 或其他能写文件、能启动本地服务器、能打开浏览器的智能体。发布周那些好游戏，都是跑了好几个小时做出来的。
  • Node.js 和一个浏览器自动化工具，比如 Playwright，让模型能自己试玩游戏。

第一步：选一个小游戏

决定成品好坏最关键的一点就是范围。Saltline 只有一关、一个目标；Tidewright 开局只有一座灯塔要点亮；What the Water Keeps 就是一条河。

先用两三句话写清楚：

  • 核心动作（划船、打无人机、摆齿轮），
  • 胜利或结束条件，
  • 想要的画面（晨光照在湿漉漉的水泥地上、油画风格的夜海）。

如果你的点子需要十个选项的菜单、背包系统和技能树，先砍掉再写提示词。

第二步：选技术方案

Three.js 有两种方案都很好用：

不需要构建。 一个 index.html，用 import map 指向 vendor/ 文件夹里的一份 three.module.js，其余代码是 src/ 下的普通 ES 模块。What the Water Keeps 就是这么做的：在浏览器里能直接看到 vendor/three/three.module.js 和 src/engine/boat.js 这样的文件。这种结构模型容易理解，也能放到任何静态托管上。

Vite。 如果你想用 TypeScript 或 npm 包，就让它建一个 Vite 项目。多了一步构建，但模型对 Vite 非常熟。

不要再在上面叠一个大型游戏引擎。做网页游戏，Three.js 加几个自己写的小模块就够了，层次越少，8 小时的长时间运行里出错的地方就越少。

第三步：设置思考强度

Fable 5.2 有五档思考强度（effort）：low、medium、high、xhigh、max。API 默认是 high，Claude 应用和 Claude Code 默认是 medium。

做游戏时建议这样用：

  • 讨论玩法、出设计方案时用 medium。
  • 长时间无人值守的正式开发用 high。Anthropic 说，模型的大部分能力提升在 high 档就已经体现了。
  • 只有最难的部分、并且你确认有效果时，才用 xhigh，它会多花很多 token。

思考强度越低，模型越容易做到一半就停下来，列一张「剩余工作」清单给你。遇到这种情况，直接明确告诉它：继续做，直到游戏完成。

第四步：提示词

下面这段提示词可以直接改着用。它沿用了发布周那些游戏的成功做法：范围窄、素材用代码生成、有性能预算、让模型自己测试。提示词用英文效果更稳定，括号里换成你的游戏内容即可。

Build a complete, polished 3D browser game with Three.js. This project is yours: you decide the structure and you will keep building on it.

GAME
- Concept: [one or two sentences, e.g. "Row a small boat down a river at sunset through three different worlds."]
- Core action: [what the player does every few seconds]
- End: [how a run ends or is won]
- Mood and look: [lighting, colour, weather, art style]
- Scope: one level / one area, finished to a high standard. Depth over breadth.

TECH
- Plain HTML + ES modules, Three.js vendored in /vendor with an import map. No build step.
- Generate all models, textures and sounds in code (geometry, shaders, canvas textures, Web Audio). No downloaded assets.
- Target 60 fps on a mid-range laptop. Add a quality setting (low / medium / high) that changes shadows, resolution and particle counts.
- Controls: keyboard and mouse, plus touch controls on phones.
- A title screen, a pause menu (Esc), and a short controls overlay.

PROCESS
- Commit to git as you go.
- Write a Playwright script that starts a local server, plays the game automatically from start to finish, takes screenshots at key moments, and fails on console errors. Run it after each major change and look at the screenshots yourself.
- Keep working until the game is finished and the play-test passes. Ordinary errors and failing tests are not reasons to stop: fix them.
- When done, write a README with how to run it and what you'd improve next.

第一行里「这个项目是你的」这句是特意加的：Anthropic 的 Fable 5.2 提示词指南提到，当提示词说明代码库归模型所有时，它会更主动地重构和修复代码。

第五步：让它跑，然后自己玩一遍

一次好的构建要跑好几个小时。Lex Toumbourou 的 Aiden's Revenge 在 Claude Code 里跑了一整夜，智能体还写了一个机器人，在无头浏览器里把 12 关全部打通并检查截图。Saltline 跑了约 8 小时。

跑完之后，自己在一台慢电脑和一部手机上玩一遍。从玩家评论和我们自己试玩来看，发布周这些游戏最常见的两个问题是性能（卡顿、页面卡死）和操作（嵌入页面里无法锁定鼠标）。把问题具体地反馈回去，比如：「在 2019 款 MacBook Air 上，下雨时帧率掉到 20 以下。低画质设置下请关掉雨的粒子，并把阴影贴图分辨率减半。」

要花多少钱

走 API 的话，费用主要取决于跑了多久：

  • Saltline：约 270 万输出 token、4.45 亿输入 token（大部分命中缓存），约 550 美元。
  • Aiden's Revenge：Lex 估计约 3.4 亿 token，大部分是缓存读取，图片和音频另外计费。

省钱主要靠提示词缓存。Fable 5.2 的缓存读取是每百万 token 0.2 美元，是普通输入价格的四十分之一。像 Claude Code 这样保持对话历史稳定的工具，会自动吃到大部分缓存折扣。

如果预算比最后那 10% 的质量更重要，可以看英文对比文章 Fable 5.2 vs Opus 5.5。Opus 5.5 每 token 的价格只有 Fable 5.2 的一半。

发布游戏

纯静态的 Three.js 游戏可以免费放到 GitHub Pages、Cloudflare Pages、Vercel 或 Netlify 上，也可以像 Felix 那样分享成公开的 Claude Artifact。

做好之后，提交到 VibeGamer。所有能玩的 Claude Fable 5.2 游戏，我们都收录在 Fable 5.2 游戏合集里；动手之前想找灵感，可以先玩玩这 18 款 Claude Fable 5.2 3D 游戏。