4 个 3D 游戏，总体积 3.82MB：拆解 Claude 的 one-shot 工程链路

AI 实测 · 工程拆解

阅读约 15 分钟。需要一点 Three.js 基础；文中的代码是按公开描述还原的示意片段，不是仓库原文，重点看思路。

先看四个东西。

一个 1.42MB、自称「国产 3A」的 FPS，有标题页、任务简报、三处中继、机械敌人、行动评级和结算面板。

一个 862KB 的 CF 运输船，6v6，四把枪，四档难度，白天和黄昏两套光照。

一个 718KB 的 QQ 飞车，四张赛道，漂移集气、小喷、双喷、起步喷、落地喷，一样不少。

一个 818KB 的鹈鹕骑车，程序化建模、双骨骼 IK、Verlet 围巾、Gerstner 海面、昼夜循环，还有 14 个成就。

四个加起来 3.82MB。没有贴图包，没有 glTF，没有 MP3，没有后端。每个都是打开就能玩的 HTML。

三个在线 demo 来自 GitHub 上的 riba2534/claude-opus-5-5-demo，作者给出的设定是 Claude Opus 5.5、Claude Code CLI、单会话、代码零人工改动。第四个《几猫》也是单文件，标题页写着"使用 Fable5.2 自主研发"，已有公开链接，但没有署名。它不在这个仓库里，别把它算到同一位作者头上。

这篇文章不聊"AI 好强"。只拆四件事：一句话提示词怎么变成工程约束，3.82MB 里到底装了什么，哪些坑是生成完才暴露的，以及这套方法现在还不能做什么。

一、先看结果：四个 demo 的技术底牌

Demo	类型	体积	代码组织	关键技术
《几猫》	第一人称射击	1.42MB	单文件	Three.js、Bloom、FXAA、ShadowMap、InstancedMesh、WebAudio
运输船	第一人称射击	862KB	18 个模块	Three.js、程序化枪械与地图、AI 机器人
QQ 飞车	竞速	718KB	15 个模块	Three.js、赛道生成脚本、漂移状态机
鹈鹕骑车	休闲	818KB	11 个模块	双骨骼 IK、Verlet 布料、Gerstner 海面、昼夜循环

几个容易被忽略的数字：

• 运输船 18 个 JS 模块，862KB；QQ 飞车 15 个模块，718KB；鹈鹕 11 个模块，818KB。模块数来自仓库 README，体积按实际文件字节算。
• 《几猫》没有模块拆分，就是一个 HTML，1,422,128 字节。
• 四者都没有外部图片、音频、模型文件。模型是几何体拼的，贴图是 Canvas 画的，音效是 WebAudio 合成的。

"单文件"和"小体积"不是同一个概念。单文件可以很大，小体积也可以拆成很多请求。这四个 demo 同时做到了两者，靠的不是压缩，而是换了一套资产生产方式。

二、one-shot 的真相：一句话背后是四层约束

先把三条原始提示词摆出来。

鹈鹕：

生成一个鹈鹕骑自行车的 3D 页面，尽可能把你所有的能力全部都用上.
然后上传到 CDN 上, 把访问链接给我

运输船：

尽可能真实的还原穿越火线中的运输船地图，我需要一个真实的枪战游戏，生成一个3d页面，尽可能发挥你的所有能力
做完之后上传到 CDN 上 把链接发给我

QQ 飞车：

尽可能真实地还原 QQ 飞车中的游戏地图。我需要一个真实的 QQ 飞车游戏，包括游戏的各种键位以及漂移玩法,生成一个3D 页面，尽可能发挥你的所有能力。
做完之后上传到 CDN 上 把链接发给我

三句话都很短，信息密度却不低。把它们拆开，能看到四层约束：

提示词里的话	实际对应的工程动作
"尽可能真实地还原"	先联网检索官方地图布局、键位、规则，再动手
"包括各种键位以及漂移玩法"	输入系统、车辆物理、漂移/氮气状态机，不能只做画面
"生成一个 3D 页面"	浏览器直接运行，单文件交付，不能依赖本地环境
"上传到 CDN，把链接发我"	构建、部署、缓存刷新、域名和证书，一条龙做完
"尽可能发挥你所有能力"	允许模型自选技术栈、资产方案和测试策略

真正值钱的是最后一条。它把"做什么、怎么做、怎么验"一起交给了模型。

所以 one-shot 不是"一次 API 调用出一个页面"。它的准确含义是：一个会话里完成从调研、设计、编码、测试到部署的闭环。中间仍然有失败、有修复、有重跑，只是这些步骤由模型自己串起来，人不再逐段接手。

仓库里还有几条硬规则：

• 模型是 Claude Opus 5.5，跑在 Claude Code CLI 里，1M 上下文，xhigh 推理。
• 渲染用 Three.js r186，构建用 esbuild，最后内联成一个 HTML。
• 模型、贴图、动画、音效全部程序化生成，不引入外部素材。
• 部署到 Cloudflare Pages，连 README 都是模型写的。
• 源码就是模型输出的原样，人工一行没改。

这几条规则决定了后面所有的技术选择。没有外部素材，就必须程序化；要单文件，就必须内联；要一句话交付，就必须把测试和部署也交给模型。

三、3.82MB 是怎么装下四个游戏的

一个常规的 3D 网页游戏，资产目录大概是这样：模型 glTF、贴图 PNG 或 KTX2、音频 MP3、动画片段、字体。四个游戏下来，几十 MB 很正常。

这四个 demo 的资产目录是空的。

3.1 几何：用参数生成，而不是建模导出

集装箱是长方体，护栏是圆柱，轮胎是圆环，树是圆锥加圆柱。这些形状用 Three.js 的基础几何体就能拼，参数化之后还能批量生成不同尺寸、不同颜色的变体。

重复对象适合用 InstancedMesh。港口里的集装箱、赛道边的树、看台的椅子，同一个几何体画很多次，draw call 不随数量线性增长。这是单文件还能跑满帧的关键之一。

3.2 贴图：Canvas 2D 画，不是 PNG

集装箱上的编号、限重、检验日期，这类细节不用 PNG，直接用 Canvas 画。画完转成 CanvasTexture，按需缓存，避免每帧重复创建。

// 程序化贴图缓存：同一个 key 只画一次
const cache = new Map();

function canvasTexture(key, draw, size = 512) {
  if (cache.has(key)) return cache.get(key);

  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  const ctx = canvas.getContext('2d');
  draw(ctx, size);

  const tex = new THREE.CanvasTexture(canvas);
  tex.colorSpace = THREE.SRGBColorSpace; // r152+ 的颜色空间
  tex.anisotropy = 4;                     // 斜视角下别糊
  cache.set(key, tex);
  return tex;
}

这段代码的好处不是省了几张图，而是"可变"。同一个集装箱函数，传不同的编号、限重、颜色，就能生成一整个堆场。换成 PNG，得先做几十张图。

代价是首帧要画。所以真实项目里会把常用贴图在 loading 阶段预生成，别等到进游戏才画。

3.3 音频：振荡器和噪声，不是 MP3

枪声、引擎、海浪、鸟叫，都是 WebAudio 合成的。噪声加滤波器做枪声，低频振荡器做引擎，多个正弦波叠加做音乐。省体积，也省版权。

代价是"像不像"全靠参数调。合成一声像样的枪响，不比找一条音效简单。

3.4 打包：esbuild 内联成一个 HTML

// build.mjs ------ 把 JS 内联进 HTML，产出一个可直接双击的文件
import { build } from 'esbuild';
import fs from 'node:fs';

const template = fs.readFileSync('index.html', 'utf8');

await build({
  entryPoints: ['src/main.js'],
  bundle: true,
  minify: true,
  format: 'iife',
  target: ['es2020'],
  write: false,
  plugins: [{
    name: 'inline-html',
    setup(b) {
      b.onEnd((result) => {
        const js = result.outputFiles[0].text;
        const html = template.replace('<!--APP-->', `<script>${js}</script>`);
        fs.writeFileSync('dist/index.html', html);
      });
    },
  }],
});

write: false 让 esbuild 把产物留在内存里，插件拿到字符串后替换模板占位符，最后一次写盘。整个过程没有单独的 JS/CSS 请求。

单文件不是信仰，是交付约束。它有明确的优缺点：

维度	单文件	常规分包
部署	传一个文件，零配置	需要静态服务器、MIME、缓存策略
首包	一次请求，整包全下来	可按路由/场景拆分
缓存	改一个字，整个文件失效	可长期缓存第三方库
调试	sourcemap 要额外处理	模块边界清晰
审查	一个几千行的文件	按模块 review
适用	demo、垂直切片、教学、作品集	长线运营、大世界、多人

这四个 demo 都属于"垂直切片"：玩法闭环完整，内容量有限。单文件正好。

四、四个 demo，四种工程难点

4.1 《几猫》：1.42MB 的"3A 语法"

《几猫》最像 3A 的地方不是画面，是流程。

标题页有任务代号 B4、小队名、时间 05:42；进游戏有任务简报："港区防御系统失控。切断三处中继，突破封锁，登船撤离。"三处中继分别在堆场、仓库、码头；敌人是机械飞鸥、机械猎犬、机械守卫；撤离艇在码头南端舷梯旁。

打完之后有行动评级：完美突击、精准果断、稳扎稳打、险象环生。结算面板统计用时、命中率、摧毁机械数、重试次数。死了也有死亡页，显示生存时间和已切断中继。

这套东西不新鲜，3A FPS 用了很多年。新鲜的是它被压进了 1.42MB。

子系统	实现
渲染	Three.js + Bloom + FXAA + ShadowMap
关卡	港区单关卡，三处中继，线性推进
战斗	步枪、近战，命中反馈与方向伤害提示
敌人	机械飞鸥、机械猎犬、机械守卫
UI	标题页、任务简报、暂停、设置、结算、死亡页
输入	键鼠、手柄、触屏三套映射
音频	WebAudio 合成环境声、枪声、无线电

技术上是标准管线：Bloom 做霓虹和信号光，FXAA 抗锯齿，ShadowMap 做港口阴影，InstancedMesh 画重复的集装箱和护栏。集装箱上的编号、限重、检验日期，全是 Canvas 画的。

它也有清楚的边界：单关卡、三种敌人、没有联机、没有剧情演出。项目介绍里写得很直白："目前项目仍在持续开发与优化中，距离国际顶尖 3A 水准还有一定差距。"

这句话比任何技术指标都诚实。它不是 3A，它是用 3A 的语法做的一个开发体验版。

4.2 运输船：先查攻略，再建图

CF 的运输船是一张有记忆点的地图。模型没有凭印象瞎搭，动手前先联网检索了官方布局和攻略。

最后落到代码里的结构是：

区域	作用	代价
船头/船尾舱室	双方出生点	出口少，容易被堵
中路 V 形斜放集装箱	主交火区	交叉火力，暴露时间长
两侧 L 形箱堆	侧翼推进	视野窄，转角多
左右单向集装箱管道	绕后	入口唯一，进去就不好退
管道顶二楼	架枪点	位置固定，容易被预瞄

这些箱子不是装饰，是地图设计语言。每一条通道都给你一个优势，同时收一笔代价。

参数也给足了：4v4、6v6、8v8；目标击杀 30、50、100；难度简单、普通、困难、地狱；主武器 AK-47、M4A1、AWM、MP5；光照白天、黄昏。

18 个模块、862KB，要装下地图、枪械、弹道、后坐力、开镜、换弹、切枪、近战、投掷物、AI、HUD、计分板。模块拆分在这里是必要的，不然一个文件改到后面会失控。

它最难的地方不是建模，是"像"。枪械的比例、开镜的视野、后坐力的节奏、AI 的推进路线，任何一项偏了，玩过 CF 的人一眼就能看出来。

4.3 QQ 飞车：手感是状态机，不是特效

QQ 飞车的键位和机制，提示词里点名要"包括"。这部分反而是最能体现工程能力的。

机制	触发	作用
漂移	Shift + 方向	集气，改变车身姿态
氮气	集气满	最多存两个，提供加速
小喷	出弯回正瞬间点 ↑	短促加速
双喷	小喷 + 氮气	叠加加速
起步喷	倒计时 GO 瞬间点 ↑	起步加速
落地喷	跳台落地瞬间点 ↑	落地补偿
加速带	蓝色箭头	直接加速
复位	R	回到赛道

把这些写成代码，核心是一个状态机：

// 伪代码：只保留状态迁移，不包含完整车辆物理
const S = { IDLE: 0, DRIFT: 1 };
let state = S.IDLE;
let charge = 0;
let nitro = 0;

function onFrame(dt, input) {
  // 1. 满足速度条件才能起漂
  if (state === S.IDLE && input.shift && input.speed > 40) {
    state = S.DRIFT;
    charge = 0;
  }

  // 2. 漂移集气，松开 Shift 结算氮气
  if (state === S.DRIFT) {
    charge = Math.min(1, charge + dt * 0.9);
    if (!input.shift) {
      state = S.IDLE;
      if (charge >= 0.85) nitro = Math.min(2, nitro + 1);
    }
  }

  // 3. 回正瞬间的小喷；按住氮气则叠加为双喷
  if (state === S.IDLE && input.justReleasedShift && input.up) {
    const double = input.nitro && nitro > 0;
    if (double) nitro -= 1;
    boost(double ? 1.6 : 1.0);
  }
}

状态机之外，还有两个细节：

一是固定时间步。漂移计时、氮气时长、碰撞检测不能跟帧率走，否则 120Hz 和 60Hz 的手感不一样。

const STEP = 1 / 120;
let acc = 0;
let last = performance.now();

function loop(now) {
  const dt = Math.min(0.1, (now - last) / 1000);
  last = now;
  acc += dt;

  while (acc >= STEP) {
    update(STEP);
    acc -= STEP;
  }

  render(acc / STEP); // 插值，避免画面抖动
  requestAnimationFrame(loop);
}

二是输入缓冲。玩家在出弯前 100ms 点了 ↑，不能因为还没回正就吞掉。把输入存一个小队列，回正那一帧再消费。

赛道也不是手摆的。作者先用脚本生成俯视图，检查弯道角度和交叉点，再进 3D 搭路面。四张赛道：11 城、情迷爱琴海、法老金字塔、雪地大冒险；八种车色；三档 AI；1/2/3/5 圈；竞速和道具两种模式。718KB，是四个里最小的。

4.4 鹈鹕：最难的，是没有 IP 可以抄

CF 和 QQ 飞车都有大量公开资料：地图、键位、攻略、视频。模型要做的是"还原"。

鹈鹕没有。一只戴头盔和墨镜的白鹈鹕，骑复古单车，车头挂藤编车筐，沿着海岸公路追鱼。这个画面没有现成参考，每个选择都得自己做。

技术点	做法
鹈鹕	程序化建模，没有外部模型
踩踏	双骨骼 IK，脚掌跟随踏板
围巾	Verlet 布料，受车速和风向影响
海面	Gerstner 波，多层叠加
天空	昼夜循环，黄昏到星空
音乐	浏览器实时合成，节奏跟踏频
内容	14 个成就、5 种镜头、抓鱼小游戏、车铃

双骨骼 IK 是这里面最典型的"看起来简单、写起来全是约束"的东西。已知髋关节、踏板位置、大腿和小腿长度，求膝盖位置：

// 两骨骼 IK：圆与圆的交点，取朝前的那一个
function solveKnee(hip, pedal, thigh, shin, bendDir) {
  const d = hip.distanceTo(pedal);

  // 余弦定理：膝盖在髋-踏板连线上的投影长度
  const a = (thigh * thigh - shin * shin + d * d) / (2 * d);
  const h = Math.sqrt(Math.max(0, thigh * thigh - a * a));

  const base = hip.clone().lerp(pedal, a / d);
  const axis = new THREE.Vector3().subVectors(pedal, hip).normalize();
  // 把 bendDir 投影到垂直于骨骼轴的方向，膝盖朝这个方向弯
  const bend = bendDir.clone().addScaledVector(axis, -bendDir.dot(axis)).normalize();

  return base.addScaledVector(bend, h);
}

公式只是第一步。真正难的是约束：踏板轨迹由曲柄角度决定，脚掌要贴住踏板，膝盖不能反关节，身体还要随着踏频轻微起伏。任何一项没对上，观众一眼就会觉得"假"。

海面用 Gerstner 波，顶点着色器里叠几层不同方向、不同波长的波：

// 顶点着色器：单个 Gerstner 波，实际会叠 3~4 层
vec3 gerstner(vec3 p, vec2 dir, float steepness, float wavelength, float speed, float t) {
  float k = 6.28318 / wavelength;
  float c = sqrt(9.8 / k);          // 深水波速
  vec2 d = normalize(dir);
  float f = k * (dot(d, p.xz) - c * speed * t);
  float a = steepness / k;

  return vec3(d.x * a * cos(f), a * sin(f), d.y * a * cos(f));
}

围巾用 Verlet：每个质点保存当前位置和上一帧位置，靠约束迭代保持长度，再叠加风力。它不需要物理引擎，几十行代码就能飘起来。

背景音乐是实时合成的，节奏跟着踏频走。这一点很讨巧：画面里的鹈鹕蹬得快，音乐就快，观众会以为整个场景是"活"的。

五、三个坑：生成完才暴露的问题

这四个 demo 最有价值的部分，是它们暴露了哪些问题；做对了什么，反而没那么重要。

5.1 320 秒浸泡测试

鹈鹕上线前跑了 320 秒的浸泡测试，刚好跨过一整个昼夜循环。检查项不是帧率：几何体数量、纹理数量和 JS 堆，才是重点。

• 几何体和纹理数量保持恒定，没有随着时间泄漏。
• JS 堆稳定在 16--26MB。
• 跨过 36km 的里程取模边界，没有出现数值跳变。

"跑一局没问题"和"跑一天没问题"是两件事。3D 场景里最常见的 bug，是每帧 new 一个几何体、每帧建一个材质，几分钟后内存爆炸。浸泡测试就是抓这个。

5.2 上线后的偶发黑屏

更麻烦的是上线后才出现的偶发黑屏。

作者的处理方式是注入 NaN 复现，最后定位到 Bloom：无效像素在泛光阶段扩散，整屏变黑。修复分两步：

1. 在泛光前加一个清理 pass，把 NaN/Inf 像素压掉。
2. 修海面菲涅尔的计算，消除产生无效值的源头。

// 泛光前的清理：NaN 用 x != x 判断，Inf 用上限截断
vec4 c = texture2D(tDiffuse, vUv);

if (any(notEqual(c, c))) {
  c = vec4(0.0);          // NaN
}
c = min(c, vec4(64.0));   // Inf 截断，64 远高于正常 HDR 范围
gl_FragColor = c;

这类 bug 很难靠"看代码"发现。它需要真实运行、需要复现条件、需要知道 HDR 管线的边界情况。

5.3 交付前的 12 个问题

仓库里还提到一个细节：交付前让子代理独立审查，找出 12 个问题并全部修复。

这说明 one-shot 的"one"是会话数，不是尝试次数。模型仍然在迭代，只是迭代发生在同一个会话里：自己查资料、自己写测试、自己跑无头浏览器、自己修 bug、自己重新部署。

人类的工作变成了定验收标准、看结果、拍板。

六、能力边界：哪些能抄，哪些不能

把四个 demo 放在一起看，边界很清楚。

能做	不能做
有大量公开参考的品类：CF 地图、QQ 键位、3A FPS 镜头	没有参考的原创玩法、情绪和手感
成熟技术的组合：Three.js + IK + 布料 + 海面	需要十年积累的动画、关卡、平衡
单机垂直切片：一关、一张图、一条赛道	长线内容、多人同步、反作弊、运营
程序化资产：几何、Canvas 贴图、合成音效	3A 级动捕、配音、扫描、美术统一性
快速验证：一个会话拿到可玩链接	大规模团队协作和项目管理

3A 的门槛从来不是画面，是钱、人和时间。几百人的团队，三到五年，上亿美元的预算，动捕、扫描、配音、关卡、平衡、优化、QA、发行、运营。

一个 1.42MB 的 HTML 再像，也只是"3A 的视觉语法"，不是 3A 的生产体系。

但它动的是另一块蛋糕：demo 层。

以前一个游戏想法要活下来，得先写 PPT、画概念图、做灰盒，再想办法拿到一笔钱，才能招人做一个能玩的版本。现在，一个策划、一个前端，或者一个不写代码的策划，一个会话就能拿到一个能跑、能看、能发链接的垂直切片。

投资人和老板不用再脑补了，点开链接就行。

这层门槛一旦塌了，游戏行业的分工就会被重新排一遍。做概念演示的人会变少，能判断"什么值得做"的人会更贵；执行层的价值往下走，审美、设计、项目管理往上走。

对前端工程师来说，这件事的冲击更直接：只会调 Three.js API 会越来越不值钱，值钱的是"知道什么效果值得做、怎么做才不假、性能预算花在哪"。

七、想复现：一段提示词和一张验收表

如果你也想跑一遍，别从"帮我写个函数"开始。给一个完整的交付目标。

做一个能直接打开的 3D <类型>，主题是 <主题>。

要求：
1. 单文件 HTML，Three.js，无外部图片/模型/音频；
2. 还原 <具体地图/玩法/键位>，先查官方资料再动手；
3. 包含菜单、设置、结算、移动端触控；
4. 用无头浏览器跑通一局，检查内存、帧率、边界；
5. 部署到 <平台>，把链接发我。

这段话比原始的三句提示词长，但更适合工程交付。原始提示词是在测模型的能力上限，这段话是在定验收标准。

验收表我一般看十项：

检查项	合格标准
首屏	3 秒内出现可交互画面，不是白屏
操作	键鼠、触屏至少两套可用，键位有提示
玩法	有开始、有目标、有结算、能重开
画面	没有明显穿模、闪烁、Z-fighting
性能	中端手机 30fps 以上，桌面 60fps
内存	连续玩 10 分钟，堆不持续增长
边界	长时间、长距离、反复重开不出错
音频	首次交互后才能播放，不自动播
部署	链接可访问，刷新不 404
版权	同人/原创标注清楚，不盗用资产

几个容易翻车的地方：

问题	原因	处理
首包太大	单文件把库和资产全塞进去	压缩、延迟生成、降低资产精度
移动端黑屏	WebGL 上下文限制/显存不足	降分辨率、降画质、检测上下文丢失
音频不响	浏览器自动播放策略	首次点击/触摸后再 resume AudioContext
触屏没反应	只监听了键盘	统一输入层，触摸映射成动作
部署后旧版本	CDN/浏览器缓存	文件名带 hash，或加版本查询参数
同人侵权	直接用了原厂贴图/模型	只还原玩法与布局，资产全部自制

八、速记表

要做的事	用什么
单文件 3D 交付	Three.js + esbuild 内联
无美术资产	程序化几何 + CanvasTexture + WebAudio
还原一张地图	先查官方布局，再搭灰盒，最后加细节
做竞速手感	状态机 + 固定时间步 + 输入缓冲
角色踩踏	两骨骼 IK + 踏板轨迹约束
海面	Gerstner 波多层叠加
围巾/旗帜	Verlet 布料
长跑稳定	浸泡测试 + 几何/纹理/堆监控
HDR 黑块	NaN/Inf 清理 pass + 查源头
交付验收	无头浏览器跑一局 + 可访问链接

一句话能生成游戏，但不能生成"值得玩的游戏"。

模型最擅长的，是有大量公开参考的品类：CF 的地图、QQ 飞车的键位、3A FPS 的镜头语言，互联网上全是教程和截图，它只需要把它们重新组织成代码。真正难的是没有参考的东西------一个新的玩法、一种没人见过的情绪、一个需要十年才能磨出来的手感。

所以《鹈鹕》反而最珍贵。它没有 IP 可以抄，每一个选择都得自己做。

四个游戏，现在都能在线玩：

• 鹈鹕骑车：claude-opus-5-5.riba2534.cn/
• 穿越火线 · 运输船：claude-opus-5-5-cf-transport-ship.pages.dev
• QQ 飞车：claude-opus-5-5-qqfeiche3d.pages.dev/
• 《几猫》：jimiao-3a-v1.pages.dev/ ，1.42MB，开发体验版

源码：github.com/riba2534/cl...

本文是「AI 实测」系列第 1 篇。下一篇，把这套 one-shot 流程拆成一份可以直接抄的提示词模板。

注：CF、QQ 飞车相关 demo 为玩家同人致敬作品，版权归原厂所有；《几猫》为开发体验版，并非真实商业 3A 项目。