这两周 AI 编程圈最热闹的话题估计就是“用 Opus 5 手搓了一个 3A 级游戏”这条演示了。一个开发者通过几段提示词让大模型生成了一套可运行的 3D 游戏场景画面看起来相当唬人光影、建模、动效都有模有样评论区直接炸锅。但紧接着 Andrej Karpathy 的回应给这股热情降了降温大意是“演示很漂亮但离真正的 3A 游戏还差得很远”。这件事其实非常值得拆一拆。今天这篇文章不打算只追热点而是想借这个现象把“AI 生成游戏演示”背后的技术实现、工程边界、卡帕西提醒的核心问题以及我们普通开发者到底该怎么理性使用 AI 辅助游戏开发完整讲清楚。文末会附一个基于 Three.js 的 3D 游戏原型实战从提示词到可运行代码都给你。1. 背景AI“手搓 3A 游戏”的演示为什么刷屏1.1 事件还原先简单回顾一下发生了什么。社区里有人晒出视频或录屏说用 Opus 5 通过自然语言对话连续迭代生成了一款 3D 游戏游戏里有地形、角色、光照、交互逻辑甚至还有简单的战斗或跑动效果。视觉上确实很有冲击力。相比以往 AI 生成那种像素风、平面 2D 小游戏这个演示直接上到了带 PBR 材质、动态光照、第三人称视角的 3D 场景。很多人第一反应是我们是不是已经可以通过提示词“造出”3A 大作了这里需要澄清一个概念社区说的“3A 级游戏”并不是指这款游戏真的达到了 3A 工业标准。它指的是“视觉观感接近 3A 的演示原型”。真正的 3A 标准包含海量美术资产、成熟玩法系统、稳定的帧率表现、完整关卡设计、多平台适配、QA 测试体系这些显然不是几条提示词能覆盖的。1.2 为什么这类演示能刷屏这事能火起来原因之一是“反差感”。过去玩家和开发者习惯了“做一个游戏需要几百万预算、几十人团队、数年版期”的认知突然看到一个人靠 AI 在几天甚至几小时内搞出高画质原型冲击力是很大的。另一个原因是生成效果的提升有目共睹。无论是代码生成、Shader 编写还是场景脚本组织大模型在 3D 领域的能力已经不像前两年那么“玩具”。它确实能输出一个结构完整的 Three.js / Babylon.js / Unity 脚本可以直接跑起来。从技术传播角度这类演示天然适合短视频和社交媒体传播视觉产物不需要额外解释玩家和开发者都能看懂。所以它很快成为热点也带动了大量人开始尝试“AI 游戏开发”。1.3 卡帕西泼冷水他到底在提醒什么Karpathy 的回应重点不是否定 AI 生成游戏的能力而是提醒大家注意“演示”和“产品”之间的巨大鸿沟。AI 生成一个 3D 场景是在一个相对干净的单页代码环境里完成的。但游戏工程的真实复杂度在于代码一致性几万行 AI 生成代码之间的函数调用、状态管理、资源引用是否永远对齐。调试排错一旦出现 bugAI 并不知道它刚才生成代码时是怎么设计的排查成本会显著上升。性能优化模型生成的代码不一定考虑了渲染上限、内存释放、场景裁剪。内容管线真正游戏需要策划表、美术资产、动画状态机、音效资源这些不是靠文本生成能全部覆盖的。测试与回归游戏玩法调整后AI 能否理解全局改动的影响范围。卡帕西想表达的核心观点可以概括成一句AI 降低了原型制作的门槛但没有降低工程化的复杂度。凡是演示视频里看不到的部分恰恰是 AI 很难替你完成的部分。2. 核心概念拆解“手搓 3A”背后的技术真相2.1 “手搓”不是玄学是 AI 辅助编程“手搓 3A”这个说法很容易让人以为 AI 是凭空“画”出了一个游戏。实际不是。社区里这类玩法的技术路径通常是这样的开发者用自然语言描述游戏愿景。AI 生成游戏工程的骨架代码比如 Three.js 或 Babylon.js 的 HTML / JS 文件。开发者运行代码发现缺失、报错或效果不对继续用提示词让 AI 补充或修复。反复迭代加角色、加碰撞、加动画、加 UI、加音效。最终得到一个可以运行的原型甚至打包成一个小游戏。本质上是“人机协作编程”只不过交互方式从写代码变成了提需求。AI 承担的是编码执行层的重复劳动开发者承担的是方向决策和质量验收。2.2 视觉惊艳感从哪里来这类演示的视觉惊艳感主要来自几个技术的叠加PBR 材质基于物理的渲染让物体表面在光照下更真实。动态光照方向光、环境光、阴影贴图让场景有了立体层次。后处理特效Bloom、雾效、颜色分级让画面更接近商业游戏风格。模型资产很多演示使用了现成的 GLTF / GLB 模型减少建模成本。摄像机平滑跟随第三人称视角的平滑插值极大提升了成品感。这些都不是 AI 发明的而是 Three.js 等框架已经具备的能力。AI 的作用是帮你把这些能力“组装”起来。所以更准确地说AI 生成了“一个把漂亮效果串起来的代码”而画面资产、渲染引擎本身是人类技术社区多年积累的成果。2.3 游戏工程化的隐性成本如果只看跑起来的画面确实像模像样。但请记住游戏开发里那句老话demo 和 game 之间隔着一个完整团队。隐性成本包括玩法的可玩性一个演示场景可能只能走几步但真正的游戏需要数值平衡、任务系统、成长曲线。平台兼容性PC、移动、主机不同平台的输入处理、性能预算、资源流送都不同。资源管理模型、贴图、音效、动画动辄几百 GB 的资源库如何组织。崩溃率与性能卡点卡顿、内存泄漏、热更新问题。团队协作Git 分支策略、代码评审、技术文档、模块接口。AI 在“创意发散”和“代码生成”上很强但在“工程收敛”和“确定性保障”上仍然很弱。这不是模型的型号问题而是当前技术范式的固有特点。3. 环境准备与工具链讲完概念我们进入实战。下面我要演示的是如何借助 Opus 级别的多模态大模型辅助搭建一个 3D 游戏原型。为了让你能跟着做这里选用最轻量的 Web 3D 方案 Three.js不需要安装复杂的游戏引擎。3.1 模型与调用方式本次示例中的“AI 辅助”角色你可以选择Claude 系列模型尤其擅长长上下文代码生成。GPT-4 系列、Gemini 等支持长文本和多模态输入的模型。国内可用的大模型 API如通义千问、智谱、DeepSeek 等只要上下文长度足够、代码生成能力达标即可。需要说明的是模型版本的 API 字段和调用方式各厂商都可能在变下面示例只展示通用调用思路具体以你使用的模型官方文档为准。如果你不想写代码调用 API也可以用官方 Web 界面直接对话本质上是一样的。3.2 本地开发环境操作系统Windows / macOS / Linux 均可。浏览器Chrome 或 Edge建议保持最新版本。Node.js建议 v18 或更高版本用于本地启动静态服务器。代码编辑器VS Code。版本管理Git。如果本机没有安装 Node.js可以去官网下载 LTS 版本安装完成后在终端执行node -v npm -v能打印出版本号说明环境可用。3.3 示例项目结构我们创建一个名为ai-3d-game-demo的项目目录结构如下ai-3d-game-demo/ ├── index.html ├── package.json └── src/ └── main.jsindex.html负责页面骨架和引入 Three.js 的模块化脚本src/main.js是游戏核心逻辑入口package.json用于管理依赖和启动脚本。4. 完整实战用 AI 辅助生成一个 3D 游戏原型这一节我们模拟一种真实工作流你不是手写所有代码而是把需求写清楚然后让大模型产出代码你自己负责验证和微调。我会同时给出“提示词示例”和“生成后的代码”。建议你直接复制代码到本地运行。4.1 明确需求拆分任务在做任何 AI 辅助开发之前先写清楚需求。比如制作一个简单的 3D 第三人称小游戏场景中有草地地面、天空、几棵树木和石块。玩家控制一个小方块角色用 W、A、S、D 移动。鼠标可以控制摄像机旋转。按空格键角色跳跃。场景里放置几个可收集的金币碰到时金币消失左上角显示得分。这个需求已经足够清晰。你可以直接把它交给 AI让它生成 Three.js 实现。4.2 初始化项目并安装依赖在终端创建项目mkdir ai-3d-game-demo cd ai-3d-game-demo npm init -y npm install three这里把three以 npm 方式安装便于后续导入模块。然后修改package.json增加start脚本{ name: ai-3d-game-demo, version: 1.0.0, scripts: { start: vite --host }, dependencies: { three: ^0.160.0 } }如果不想用 Vite最简单的方式是使用 Python 的静态服务器python3 -m http.server 8080但此时需要把three的模块路径改成 CDN 地址。为了更接近工程化下面示例使用 npm 安装方式。4.3 编写入口文件 index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleAI 3D 游戏原型/title style body { margin: 0; overflow: hidden; font-family: Arial, Helvetica, sans-serif; } #score { position: fixed; top: 20px; left: 20px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.5); padding: 8px 16px; border-radius: 6px; z-index: 100; user-select: none; } #info { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0, 0, 0, 0.4); padding: 6px 14px; border-radius: 4px; z-index: 100; user-select: none; } /style /head body div idscore得分0/div div idinfoWASD 移动空格跳跃鼠标拖拽旋转视角/div script typemodule srcsrc/main.js/script /body /html这个页面主要提供了得分展示、操作提示以及引入src/main.js游戏逻辑。4.4 编写核心游戏逻辑 main.js下面这段代码就是 AI 生成后人工整理过的版本包含了场景、光照、角色控制、碰撞、金币收集和摄像机跟随。// 文件路径src/main.js import * as THREE from three; import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js; // 1. 初始化场景 const scene new THREE.Scene(); scene.background new THREE.Color(0x87ceeb); scene.fog new THREE.Fog(0x87ceeb, 30, 80); // 2. 初始化摄像机 const camera new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 200); camera.position.set(0, 8, 12); // 3. 初始化渲染器 const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled true; renderer.shadowMap.type THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // 4. 光照 const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const dirLight new THREE.DirectionalLight(0xffffff, 1.2); dirLight.position.set(10, 20, 10); dirLight.castShadow true; dirLight.shadow.mapSize.width 1024; dirLight.shadow.mapSize.height 1024; scene.add(dirLight); // 5. 地面 const groundGeometry new THREE.PlaneGeometry(50, 50); const groundMaterial new THREE.MeshStandardMaterial({ color: 0x4caf50 }); const ground new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x -Math.PI / 2; ground.position.y -0.5; ground.receiveShadow true; scene.add(ground); // 6. 辅助网格方便观察场景坐标 const gridHelper new THREE.GridHelper(50, 20, 0xaaaaaa, 0xcccccc); gridHelper.position.y -0.4; scene.add(gridHelper); // 7. 树木 function createTree(x, z) { const group new THREE.Group(); const trunkMaterial new THREE.MeshStandardMaterial({ color: 0x8b4513 }); const trunk new THREE.Mesh(new THREE.CylinderGeometry(0.4, 0.6, 2.5), trunkMaterial); trunk.position.y 1.25; trunk.castShadow true; const leavesMaterial new THREE.MeshStandardMaterial({ color: 0x228B22 }); const leaves new THREE.Mesh(new THREE.ConeGeometry(1.2, 2.5, 8), leavesMaterial); leaves.position.y 3.2; leaves.castShadow true; group.add(trunk); group.add(leaves); group.position.set(x, 0, z); return group; } scene.add(createTree(-6, -4)); scene.add(createTree(5, -7)); scene.add(createTree(8, 3)); scene.add(createTree(-8, 6)); // 8. 石块 function createRock(x, z) { const rock new THREE.Mesh( new THREE.DodecahedronGeometry(0.8), new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.9 }) ); rock.position.set(x, 0.2, z); rock.scale.set(1, 0.6, 1); rock.castShadow true; return rock; } scene.add(createRock(-3, 5)); scene.add(createRock(2, -6)); scene.add(createRock(-9, -2)); // 9. 玩家角色方块 const player new THREE.Mesh( new THREE.BoxGeometry(1, 1.6, 1), new THREE.MeshStandardMaterial({ color: 0xff5722 }) ); player.position.y 0.8; player.castShadow true; scene.add(player); // 10. 金币 const coins []; function createCoin(x, z) { const coin new THREE.Mesh( new THREE.CylinderGeometry(0.5, 0.5, 0.1, 16), new THREE.MeshStandardMaterial({ color: 0xffd700, metalness: 0.7, roughness: 0.3 }) ); coin.rotation.x Math.PI / 2; coin.position.set(x, 1.2, z); coin.castShadow true; scene.add(coin); coins.push(coin); } createCoin(3, 2); createCoin(-4, -3); createCoin(7, -2); createCoin(-2, -7); // 11. 得分系统 let score 0; const scoreElement document.getElementById(score); function updateScore(points) { score points; scoreElement.textContent 得分${score}; } // 12. 操作解析 const keys {}; let jumpSpeed 0; let isJumping false; let canJump true; window.addEventListener(keydown, (event) { keys[event.key.toLowerCase()] true; if (event.key canJump) { isJumping true; jumpSpeed 8; canJump false; } }); window.addEventListener(keyup, (event) { keys[event.key.toLowerCase()] false; }); // 13. 摄像机控制鼠标拖拽旋转 const controls new OrbitControls(camera, renderer.domElement); controls.target.copy(player.position); controls.enableDamping true; controls.dampingFactor 0.08; controls.maxPolarAngle Math.PI / 2.2; controls.minDistance 3; controls.maxDistance 20; controls.enablePan false; // 14. 碰撞检测判断两个物体水平方向是否接近 function isNearPlayer(obj, distance 0.9) { const dx obj.position.x - player.position.x; const dz obj.position.z - player.position.z; return Math.sqrt(dx * dx dz * dz) distance; } // 15. 游戏主循环 const clock new THREE.Clock(); let animationTime 0; function animate() { requestAnimationFrame(animate); const delta clock.getDelta(); animationTime delta; // 15.1 玩家移动 const moveSpeed 5 * delta; if (keys[w]) player.position.z - moveSpeed; if (keys[s]) player.position.z moveSpeed; if (keys[a]) player.position.x - moveSpeed; if (keys[d]) player.position.x moveSpeed; // 15.2 跳跃 if (isJumping) { player.position.y jumpSpeed * delta; jumpSpeed - 15 * delta; if (player.position.y 0.8) { player.position.y 0.8; isJumping false; canJump true; } } // 15.3 边界约束 const bound 22; player.position.x Math.max(-bound, Math.min(bound, player.position.x)); player.position.z Math.max(-bound, Math.min(bound, player.position.z)); // 15.4 金币旋转动画与收集 coins.forEach((coin, index) { coin.rotation.z animationTime; if (isNearPlayer(coin)) { scene.remove(coin); coins.splice(index, 1); updateScore(100); } }); // 15.5 摄像机跟随与控制器同步 controls.target.set(player.position.x, player.position.y 1, player.position.z); controls.update(); renderer.render(scene, camera); } animate(); // 16. 窗口自适应 window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });4.5 运行与验证回到终端在项目目录执行npm start然后浏览器访问http://localhost:5173端口以 Vite 实际输出为准你会看到蓝色天空与淡雾效果。绿色草地下有网格线辅助定位。场景中有树木、石块。橙色方块角色显示在场景中央。使用 WASD 移动空格跳跃。鼠标拖拽可以旋转视角。碰到金币后得分增加金币消失。如果你是第一次接触 Three.js可能觉得代码量不少。但请注意这个版本的代码主要是在 AI 首次生成基础上做了局部修正统一了变量命名、修正了碰撞逻辑、补充了边界限制和阴影配置。AI 输出的原始代码大概率会被运行时报错打回两次这本身就是“从 demo 到可用”的必要过程。5. 卡帕西提醒的工程问题从 Demo 到产品上面这个示例已经能跑起来看起来也有一定的完成度。但如果继续扩展就会立刻碰到卡帕西说的那些问题。5.1 上下文窗口与状态一致性会话式 AI 有上下文窗口限制。当代码文件变长、对话轮次增多之后模型会逐渐“忘记”最早的设计决策。比如你让 AI 生成了角色控制器又让它添加背包系统。新代码可能引用了不存在的函数或者和之前的输入处理逻辑冲突。此时你需要手动梳理模块边界甚至重写部分代码。解决思路每次让 AI 专注于一个模块不要在一次会话里铺太多需求。为每个模块单独建立对话并提供模块接口说明。关键代码手动审查不要直接信任 AI 的接口定义。5.2 测试与回归问题AI 生成的代码没有测试习惯。它不会主动思考“这个改动会不会影响跳跃速度”“金币收集会不会因为数组 splice 出现索引错乱”。要长期维护你需要自己补测试。对于 3D 游戏建议至少覆盖输入响应是否灵敏。物体碰撞边界是否正确。摄像机跟随是否存在抖动。资源加载失败时是否有兜底逻辑。不同帧率下物理表现是否一致。5.3 性能与资源管理AI 生成场景时容易出现过量光源、过多阴影、无必要的特效叠加。演示视频可能跑在高端显卡上但玩家不一定有同样的硬件。性能优化方向限制阴影贴图大小。使用 InstancedMesh 渲染大量重复物体。远离摄像机的物体做裁剪或简化。避免在每一帧创建新的对象。5.4 美术资源与内容管线真正的游戏开发中代码只是很小一部分。模型、贴图、动画、音效、剧情文本、任务配置这些内容需要一套完整的管线来管理。AI 能帮你生成代码和部分文本但无法替代美术团队的风格控制、动画师的关键帧调整、策划的数值设计。如果你的目标是做“独立游戏”可以靠 AI 降低原型成本但如果目标是商业发布美术与内容管线仍是核心瓶颈。5.5 版权与合规边界使用 AI 生成游戏代码、素材时需要注意生成代码可能包含来自训练数据的接近复制内容商用前建议做代码质量与版权风险评估。如果使用 AI 生成美术模型或贴图素材版权归属和训练数据来源需要符合平台政策。部分游戏平台对 AI 生成内容有披露要求上架前确认各平台政策。不要因为“AI 生成的”就默认它没有版权风险。谨慎一点总是好的。6. 常见问题与排查思路下面整理了使用 AI 做 3D 游戏原型时最高频的问题以及对应的排查路径。问题现象常见原因解决思路页面白屏控制台报Cannot read properties of undefined模块导入路径不对或某个对象未初始化检查 import 路径、确认 three 版本逐行注释定位异常角色移动太快或太慢移动速度没有乘以 delta 时间使用clock.getDelta()计算移动距离跳跃时角色会穿透地面跳跃条件判断遗漏了落地阈值增加player.position.y 0.8的落地判断摄像机不跟随角色控制器 target 没有更新在animate中同步controls.target鼠标拖拽旋转时会拖动页面浏览器默认行为未阻止给画布添加pointerdown事件并阻止默认阴影没有显示没有开启 shadowMap 或没有设置 castShadow检查 renderer、光源、物体的 shadow 配置金币收集时报错索引问题遍历时 splice 修改了数组使用倒序遍历或收集待删除索引AI 生成的代码和已有代码冲突每次对话没有承上启下新需求单独开对话提供模块接口说明场景加载很卡阴影贴图过大或物体过多降低 shadow mapSize使用 InstancedMesh如果遇到 AI 生成的代码反复报错常见的姿势是把报错信息原样贴给它并附上相关代码块。大多数情况下它能定位到问题但涉及多人协作或复杂状态时手动排查仍然是必备能力。7. AI 辅助游戏开发的最佳实践结合前面的事件和实战我给普通开发者几条具体建议。7.1 让 AI 做脚手架不做上帝AI 最适合完成以下工作生成项目骨架。实现标准算法。编写 Shader 初稿。补充注释、文档。样式调整和 UI 布局。将伪代码转成可执行代码。它不适合在没有人工审校的情况下直接生成复杂的商业级游戏逻辑。你应当把 AI 当成“一个反应很快、但记忆很短的初级工程师”所有代码都必须经你审查。7.2 建立验证闭环每次让 AI 生成代码后立即运行。哪怕只是一个console.log也要确认模块能正常工作。把验证结果反馈给 AI再继续下一步。推荐的循环是写需求 - AI 生成 - 运行验证 - 发现问题 - 粘回错误 - AI 修改 - 再运行这个闭环越快AI 的产出质量越高。相反如果你让它连续生成多个模块后一次性运行排错成本会成倍上升。7.3 版本管理与回滚AI 生成代码时会经常推倒重来所以 Git 提交特别重要。建议每个稳定节点提交一次git add. git commit -m feat: 完成玩家移动与跳跃如果后续 AI 改动破坏了原有功能你可以快速git revert然后告诉 AI“回退到上一版重新实现”。这比在混乱的代码里手动改回要靠谱得多。7.4 提示词资产化把好用的提示词保存下来形成自己的提示词库。比如“用 Three.js 生成一个第三人称角色控制器WASD 移动空格跳跃。”“给场景添加半透明的雾效并把背景改为黄昏色调。”“为所有物体开启阴影并优化阴影性能。”“将怪物巡逻逻辑拆成独立模块使用状态机实现。”这些提示词就是你在 AI 协作时代的“函数库”。下次做新项目时直接复用能大幅提升效率。7.5 注意生产环境边界如果你最终要上线游戏需要注意几点压缩代码体积做资源懒加载。尽可能使用 CDN 或本地静态资源避免运行时下载不稳定。多设备测试尤其是移动端 WebGL 兼容性。做好异常捕获不能因为一帧渲染错误导致白屏。保留玩家数据的本地存储或账号同步方案。AI 辅助开发的最大价值是帮你快速验证创意而不是替你把所有生产细节都解决。上线前的人工审查和测试仍然不可省略。7.6 回归到“游戏设计”最后一点可能容易被忽视技术只是实现手段游戏好不好玩才是核心。AI 能生成代码和画面但“为什么好玩”仍然需要人去设计和思考。你可以用 AI 快速做十几个原型然后亲自试玩判断哪个方向更值得深入。这个“创意筛选”的过程正是工程师转游戏制作人最重要的能力。8. 总结与下一步建议回到最开始的事件Opus 5“手搓 3A 游戏”的演示确实惊艳但卡帕西的提醒也很中肯。AI 生成游戏的能力在快速提升它已经把“做一个高画质原型”的成本拉到了极低水平。这是真实的进步值得肯定。但 3A 级游戏的工业化生产仍然依赖大量 AI 难以覆盖的工程细节。这篇文章里我们完成了从现象分析到代码实战的完整闭环梳理了“手搓 3A”背后的 AI 辅助编程路径。分析了视觉效果的来源是渲染框架而非模型凭空创造。用 Three.js 构建了一个可运行的 3D 游戏原型。拆解了从 demo 到产品之间的工程化差距。整理了 AI 辅助开发中的常见问题与最佳实践。下一步你可以继续探索的方向包括深入 Three.js / Babylon.js 的渲染管线和物理系统。学习 Godot 或 Unity把 AI 生成的 Web 原型迁移到商业引擎。研究提示词工程在游戏数值配置、关卡生成中的应用。了解 GLTF 模型格式学习格式转换、模型压缩与场景资产组织。尝试给原型加上音频系统、粒子特效、后端排行榜让玩法更完整。如果你也在这段时间尝试过用 AI 生成游戏欢迎在评论区聊聊你的体会。是顺畅到飞起还是被 bug 追着跑相信每个人的经验都会很有意思。