把话说在前面这个标题不是我随手起的噱头。最近我实际用 AI 辅助的方式真就靠着自然语言对话一步步弄出了一个能跑、能玩、有界面、有音效的 3D 小游戏全程没有手写过完整代码也没打开过任何建模软件。整个过程看下来最花时间的反而不是“做游戏”而是“把需求说清楚”。这篇文章就是把这条路径完全拆开讲讲三个关键问题为什么 0 代码能做 3D 游戏怎么用三句话把自己想要的游戏描述明白以及真正实操时会踩到哪些坑。如果你是完全零基础的新手想看看 AI 到底能帮你做到什么程度或者你是游戏策划、独立开发者想快速验证玩法原型再或者你纯粹好奇“0 建模”怎么做 3D 场景这篇文章都适合你。我不打算讲一堆大道理就按我实际操作的顺序把生成过程、提示词写法、检查清单、避坑技巧全部记录下来。1. 先搞清楚0 代码和 0 建模是怎么实现的1.1 背后的核心不是魔法是自然语言转代码先说结论所谓的“0 代码”指的是你不用手动敲完整的程序逻辑但最终运行的还是代码。区别在于代码是大模型根据你的自然语言描述生成的。你只需要把需求说清楚比如“创建一个 3D 场景里面有一个小球按方向键可以移动”大模型就会自动补全场景初始化、输入监听、动画循环、渲染更新这些底层逻辑。这个模式在早期其实很不稳定AI 经常会生成残缺代码。但现在的 AI 编程助手进步非常明显尤其是对 JavaScript 和 Three.js 这类生态成熟、示例多、语法结构固定的技术栈生成质量已经相当能打。我通常会让 AI 把完整内容输出成一个独立的 HTML 文件里面内联了 CSS 和 JavaScript然后直接在浏览器打开就能跑完全不需要安装开发环境。这样做的好处是省掉了编译和打包。很多零基础的人卡在第一步就是环境装不起来Node.js 装完不知道干嘛、Webpack 配了一堆看不懂的配置、路径问题反复报错。而一个 HTML 文件双击就能打开对新手友好得多。1.2 为什么选 Three.js而不是 Unity 或 Unreal很多人的第一反应是做 3D 游戏不应该用 Unity 或者 Unreal 吗这两个确实是专业引擎但它们的问题是太重了。下载安装就得好几个 GB打开工程还需要理解场景、预制体、组件、材质、灯光一整套概念零基础玩家光看教程就劝退。而且这类引擎的输出目标是安装包或者 WebGL 程序把一个原始 demo 跑起来中间还有很长的链路。Three.js 是一个跑在浏览器里的 3D 图形库它和 Unity 的区别有点像“手动挡 vs 自动挡”的关系。Unity 给你提供了完整的编辑器界面操作直观但体系庞大Three.js 给了你一堆积木块你需要用代码把这些积木拼起来。但如果由 AI 来帮你拼那对于非程序员来说Three.js 反而是更合适的路线代码量少、结果即时可见、浏览器 F12 就能调试、改一个数字再刷新一下页面就能看到效果。我这次选的方案是单个 HTML 文件 CDN 引用的 Three.js 内联的 JavaScript。因为 Three.js 的 CDN 版本非常成熟直接引入就能用不涉及任何下载安装。1.3 0 建模的真相一切场景都用基础几何体拼再来说“0 建模”。传统 3D 游戏需要美术同学用 Blender、Maya、或者 C4D 做出角色、道具、地形模型。但我们的目标不是做 3A 大作而是做一个“可玩的、逻辑完整的游戏 demo”这种情况下完全可以用程序化生成来替代建模。什么意思呢Three.js 内置了非常多的基础几何体类型正方体、球体、圆柱体、圆锥体、圆环、平面、环面结……这些几何体不需要任何外部模型文件几行代码就能创建并且放到场景里。你用这些基础形状组合一下长方体做平台球体做玩家角色圆柱体做柱子障碍圆环放在空中当收集物一个看起来还像模像样的 3D 关卡就搭起来了。这背后的设计逻辑是对于玩法验证阶段占位模型足够用。很多独立游戏在原型阶段用的也是这种“方块人 胶囊体”的粗糙模型因为核心要验证的是“好不好玩”而不是“好不好看”。等到玩法确定了再去套正式美术资源也不迟。2. 核心思路拆解怎么把游戏设计“聊”出来2.1 三句话背后的需求拆解逻辑你可能好奇一个 3D 游戏至少包含场景、角色、控制、碰撞、计分、界面、音效好多部分怎么三句话就搞定关键在于三句话不等于三个词每一句都可以是一个包含若干子条件的复合句。AI 能自动把这些条件拆分成多个待办任务然后一次性写进代码里。我做的是一个“小球收集星星”的游戏。这三句话分别是这样的第一句定义基础玩法和场景“用 Three.js 做一个 3D 收集游戏场景是一个悬浮平台玩家控制一个彩色小球在平台上来回移动目标是吃掉随机出现在平台上的星星方向键控制移动把代码写在一个 HTML 文件里。”第二句补充规则和反馈“加上计分和计时功能星星被吃到后消失并随机换位置出现吃到星星增加得分另外在平台上放几个圆柱体障碍物小球碰到障碍物会减速但不能穿过同时做一个小地图视角的相机跟随。”第三句完善整体体验“增加游戏开始界面和结束界面结束时显示最终得分和用时吃掉星星时用 Web Audio 生成一个简短音效还要支持手机触摸屏幕上的虚拟方向键整体配色和光影要有一定的视觉效果。”你可以看到每一句话都不是简单的主谓宾而是一段“需求描述”。大模型会理解这段描述再把拆解出的功能点对应着 Three.js 的 API 来组织代码。2.2 提示词质量决定了生成结果质量在实际执行中提示词里的信息密度比文采重要得多。我把提示词的要求总结成这么几条经验指明技术栈开头就说明用 Three.js并且要求“写成一个完整的 HTML 文件”这样 AI 就不会给你拆成多个模块也不会上来给你生成一段没法直接运行的伪代码。指明场景构成有哪些物体、分别是什么形状、放在哪里、什么颜色。你的描述越具体AI 生成的场景就越接近你脑子里的画面。指明交互方式键盘还是触摸相机是第三人称跟随还是固定视角角色移动是物理模拟还是直接改坐标。指明可玩闭环目标是什么、失败条件是什么、结束条件是什么、怎么反馈给玩家。一个没有目标的游戏玩起来就是空荡荡的沙盒加了目标和反馈才算“可玩”。很多 AI 生成代码效果差问题不在 AI 能力而在提问人压根没想清楚自己要什么。你是玩家也是产品经理先想明白再让 AI 动手效果能提升一个档次。2.3 为什么 3 句话就能形成完整闭环从开发流程看这三句话其实对应着软件开发的三个经典阶段搭建骨架、补充玩法、打磨体验。第一句话生成的是最小可运行版本英文里叫 MVP。这一版能跑起来但什么都没有只有场景、角色、移动、收集物。它的作用是验证“噢原来我最基础的想法是成立的”。第二句话把游戏性加进去计分、计时、障碍、碰撞响应。到这一步游戏开始有目标、有挑战、有反馈了你会发现玩家开始愿意多玩几秒。第三句话解决的是“愿不愿意再打开一次”的问题。开始界面、结束界面、音效、移动端适配、视觉细节这些让 demo 从“代码验证品”变成了“可以拿给别人玩的作品”。软件工程里讲究迭代开发每一轮迭代的范围小、反馈快、风险可控。三句话正好对应三次大迭代每一句生成后我都会运行、检查、发现问题再带着问题进入下一句。这不是偷懒而是高效的开发节奏。3. 实操过程从空白页面到可玩 3D 游戏3.1 准备环境真正需要的东西只有两样这次实操的准备是我做过项目里最简单的一次只需要一个浏览器、一个 AI 对话窗口。AI 工具方面你可以用市面上的主流大模型对话产品也可以选择专门做代码生成的产品。我习惯先把要求讲清楚让 AI 给我一个“完整可运行的单文件版本”然后把这个文件里的内容复制保存成 demo.html用浏览器直接打开。如果你的 AI 工具生成的是部分代码片段也别慌只要补一句“请把上面的内容补全为一个完整的 HTML 文件包含所有 JavaScript、CSS 和 CDN 引入”AI 基本都能给你整合好。这里有个细节值得注意如果 AI 生成的代码里引用了外部文件比如字体、贴图、音频资源本地打开会出现加载失败。所以我特别强调一句“不要引入额外文件一切资源都用代码生成”这样生成结果才能做到“一个文件跑天下”。我踩过这个坑第一版 AI 生成的游戏的按钮字体引了 Google Fonts结果我离线打开样式全崩了。3.2 第一句话生成基础场景和角色控制我先输入了第一句话AI 返回了一个完整的 HTML。我保存后双击打开浏览器里出现了一个淡蓝色天空背景下的悬浮平台平台是个灰白色长方体上面有一个彩色小球一颗一颗的小星星零散地分布在几个位置。用键盘方向键控制小球移动时能明显感觉到速度和转向是平滑的不是那种一卡一卡的跳变。我检查了三样东西控制是否符合直觉、视角是否合适、收集物能不能互动。这个版本的星星还只是摆在那里走近没有反应这正常因为第一句话只要求“摆在平台上”规则在第二句话再加。第一版常见的坑是相机不跟随。有些版本的小球一移动就跑出屏幕这是因为相机固定在世界坐标没有把 player 的位置同步过来。给 AI 的提示里一定要强调“相机跟随小球”或者直接说“第三人称跟随视角”。如果没提到AI 默认会按固定视角处理移动体验就大打折扣。3.3 第二句话加入玩法规则与碰撞反馈第二句话加上计分、计时、障碍和碰撞后游戏迎来了质变。我把提示词发过去后AI 在原有代码基础上做了调整左侧画面上方出现了得分和计时的数字星星被小球碰到后会在原地消失同时在平台的随机位置重新生成一颗新的。这里最值得注意的是碰撞检测逻辑。Three.js 本身并不是一个物理引擎所以 AI 在这里往往会用“距离判断”来做碰撞计算玩家小球和星星之间的距离如果小于一个阈值就认为碰撞发生。代码大概是这种感觉function checkCollisions() { const playerPos player.position; collectibles.forEach((star) { if (!star.visible) return; const distance playerPos.distanceTo(star.position); if (distance 1.2) { star.visible false; score 1; updateScore(); respawnStar(star); } }); }这个阈值 1.2 不是瞎写的。如果玩家小球半径是 0.5星星半径是 0.4那么两个球体的中心距离小于 0.9 时理论上就发生接触了但为了手感通常会留一点余量取 1.2 或者更大一点。你也可以用 Box3 或者 Raycaster 做更精确的碰撞但对于收集类游戏距离判断的体验已经很不错了。这版我重点检查了三个点分数是不是只加一次、星星重生位置是不是和障碍物重叠、障碍物碰撞是不是真的能让玩家减速。前两个点 AI 处理得不错第三个点它实现得很直接碰到圆柱体障碍时给玩家加一个短暂的减速效果而不是硬碰硬物理反弹。好处是代码简单、效果直观缺点是没有真实阻挡感小球还是能穿过去。想要真正挡住需要改成“碰障碍物就重置到上一个安全位置”或者引入一个简单的物理引擎比如 cannon-es。3.4 第三句话打磨体验变成能拿给别人玩的样子第三句话是在前两版基础上继续润色。AI 给页面加了一个半透明的开始遮罩点击“开始游戏”按钮后进入游戏游戏结束时弹出结算面板显示得分和用时还能选择“再玩一次”。同时它用 Web Audio API 生成了一个简短的拾取音效频率从高到低变化听起来像“叮”一声。音效这块值得说一下。传统做法是要准备音频文件但 AI 用代码生成了核心逻辑是创建一个 AudioContext然后播放一个短促的正弦波function playPickupSound() { const audioCtx new (window.AudioContext || window.webkitAudioContext)(); const oscillator audioCtx.createOscillator(); const gainNode audioCtx.createGain(); oscillator.type sine; oscillator.frequency.value 800; gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime 0.2); oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); oscillator.start(); oscillator.stop(audioCtx.currentTime 0.2); }这种“代码生成音效”的方式是 0 资源开发的经典操作特别适合原型阶段。它不需要任何音频文件也不会有跨域加载问题唯一的缺点是音色比较廉价无法作为成品游戏音效。如果之后再升级可以把 Web Audio 换成简单音频文件的加载和小型混音。移动端适配是个隐藏难点。AI 生成了屏幕左侧的虚拟方向键方式是在页面角落放几个透明的可点击区域然后把点击状态映射到方向键的逻辑上。这里容易出现的问题是虚拟键的 touch 事件和页面滚动冲突导致点按没有反应。解决办法通常是给按钮容器加touch-action: none以及给 body 加overflow: hidden禁止滚动。3.5 如果 AI 跑偏了用这几招拉回来我这次运气不错三次生成的大方向都对但过程中依然有一些小问题需要单独修。最典型的场景是 AI 在第三次修改时把第一次的某些功能弄丢了比如开始遮罩加好了但计分消失了。遇到这种情况不要急着开新会话也不要从头开始写。我会先把当前完整代码复制出来粘贴给 AI然后明确说“这是我目前的完整代码请在此基础上修改不要省略任何已有功能”这句话能极大减少回归问题。AI 在理解“增量修改”和“整体重写”时差异很大如果你不说清楚它很可能自作主张给你重写一个全新版本丢掉之前的细节而且可能引入新的 bug。另一个实用技巧是让 AI 先解释代码再让 AI 改代码。一旦发现某个功能表现不对我会先问它“当前计数功能的工作原理是什么请定位相关代码”让它先分析再修改比直接说“帮我修一下”的成功率高很多。这背后的原因是大模型在中途修改时如果连它自己生成的代码结构都没梳理清楚很容易把变量名改错、把作用域写乱。4. 常见问题与避坑实录4.1 页面空白或 Three.js 加载失败这是出现频率最高的问题。打开 HTML 后页面全白F12 控制台一般会报这种翻车信息three.min.js 加载失败或者某个 CDN 域名被网络环境拦了。解决办法分三层。第一把 CDN 链接换成国内访问稳定的公共 CDN比如换成 cdnjs 或 bootcdn 的 Three.js 文件地址。第二直接把 Three.js 文件下载下来放到本地目录用script src./three.min.js/script相对路径引用这样彻底告别 CDN 波动。第三如果代码中用到了import方式引入 ES Module记得检查是否用了跨域限制本地双击打开通常不允许 module 加载最简单的做法是强制 AI 生成“非 module”的全局 script 版本。我给 AI 的最后一句话经常会是“请使用script标签全局引入的方式不要用 import。”4.2 相机视角不舒服相机是整个游戏体验的灵魂。AI 默认生成的相机有时候固定在场景一角玩家角色走远了就看不见了。我建议在提示词里直接写“使用第三人称跟随视角相机位置跟随玩家位置并保持适当高度偏移”。修改后每一次动画循环里都要做这件事camera.position.x player.position.x; camera.position.z player.position.z 10; camera.position.y 8; camera.lookAt(player.position);这样相机会像一只忠诚的小鸟一样始终悬在玩家身后上方看向玩家的位置。如果你想要更顺滑的镜头可以给相机加一点插值让它不是瞬间跳到目标位置而是每帧向目标移动一小段距离。代码里可以用lerp函数效果是镜头延迟跟随类似很多第三人称游戏的跟拍感。4.3 碰撞检测不准、小球穿模Three.js 不是物理引擎它本身没有“碰到就停下”的概念。距离检测只能做收集判定做不了实时阻挡所以小球经常穿过障碍物。解决思路一般是改用更简单的“包围盒”碰撞即把每个碰撞体都当成一个 AABB 或者球体来做检测或者引入轻量的物理库做动力学模拟。对于新手我反而建议别一上来就搞物理引擎先用“检测到碰撞就回到上一个位置”的方案。玩家移动前记录一下当前位置如果下一帧移动后与障碍发生碰撞就把位置恢复为之前的位置。这样实现成本低手感也不会太差而且这个思路理解起来非常直观。4.4 手机端无法控制如果不做移动端适配手机打开页面后只能看到画面点哪都没反应。解决办法是与虚拟摇杆或虚拟方向键。AI 用绝对定位的按钮覆盖在画面边缘监听touchstart、touchmove、touchend事件来改变一个按键状态对象然后在动画循环里读取这个对象决定玩家的移动方向。挂掉全局滚动是移动端适配的关键不然在虚拟键上滑动时页面会跟着滚动玩家就会破口大骂。4.5 AI 更新代码后把原有功能弄丢了这是我实操中踩过最深的坑特意拿出来多讲几句。当你在一个长对话里连续提需求时大模型的上下文窗口是有限的越后面的修改越容易遗漏前面的功能甚至出现“同一个变量名在不同位置含义不同”的混乱情况。我的应对方式是每次大版本更新前先把当前可用版本另存为一个备份文件写上版本号 v1、v2、v3。AI 给出的新代码如果跑不通就回滚到上一版再针对性地让 AI 做增量修改而不是硬着头皮在新代码上继续叠。这个习惯在纯人工开发中也是好习惯有历史版本随时可以回退安全感完全不同。4.6 常见问题速查表问题典型表现快速处理页面空白黑屏或白屏无场景F12 查看控制台报错检查 CDN 是否加载成功键盘没反应按方向键小球不动确认窗口是否处于焦点状态点击页面后再按键相机不跟随小球跑出屏幕在动画循环里同步更新 camera.position 并 lookAt 目标小球穿过障碍物碰撞判定失效用距离检测或包围盒检测碰撞后回退到上一位置手机端无法控制触摸无响应给虚拟键容器加 touch-action: none禁止页面滚动AI 生成代码大量报错控制台一片红备份当前版本要求 AI 在“现有完整代码”上修改音效不工作点击后没有声音检查浏览器是否自动播放受限需要用户点击后初始化 AudioContext提示如果你在浏览器里手动打开文件时遇到任何脚本正在访问本地资源的问题优先给 AI 反馈“请不要使用 require 或 fetch 加载本地文件把所有内容写到同一个文件里”。5. 再往前一步游戏扩展与工具选择5.1 从三句话到更多话扩充玩法其实不难一旦这个基础 demo 能跑通扩展玩法就变成了一件很快乐的事。想让球跳起来加一个垂直速度变量和一个落地检测想做更多关卡用二维数组设定平台布局程序化生成迷宫想加入敌人让 AI 生成一个沿着固定路径移动的红色球体碰到玩家就重置分数。这时候你可能会发现提示词里的“三句话”变成了“二十句话”但这完全正常。三句话只是演示最小闭环的起点不是能力的上限。真正重要的是你已经学会了“描述需求 - 生成代码 - 运行验证 - 再描述”的循环这个循环本身就是软件开发的缩影。5.2 3D 游戏开发工具到底怎么选这些年我试过不少 3D 相关工具可以给你一个简单的判断框架如果你是想做独立小游戏并且愿意投入学习Unity 是相对均衡的选择资源多、社区成熟、导出平台广。如果目标是网页端小游戏、互动页面、Web 3D 展示Three.js 或 Babylon.js 这类 WebGL 库更轻量配合 AI 生成落地极快。如果是团队开发大型 3D 项目Unreal 的渲染效果和性能表现非常强但学习曲线陡峭不做大项目就别硬上。如果只是想验证玩法和快速原型那 AI 对话窗口加 Three.js 这条路几乎是为零基础的人量身定做的。我自己现在的工作流是“AI 出原型人工做打磨”AI 负责把百分之八十的机械逻辑写掉我负责玩、负责挑问题、负责把体验调到舒服。至于 Python 或者其他编程语言看懂了这套 JavaScript 逻辑以后再迁移过去会快很多编程语言只是表达逻辑的不同方言底层思维是一致的。5.3 一点个人体会这次做完这个小游戏我的感受很深。以前觉得“做游戏”是一道很高的门槛要写代码、要建模、要懂引擎、要会调美术。但 AI 把这扇门推开了一大半你需要做的反而是更接近游戏本质的事想清楚什么好玩说清楚你想要什么然后不断试玩、反馈、修改。建议你也可以试着从一句话开始不追求三句话就做成完整作品。第一句只做一个能走动的小球就行。当你亲眼看到自己描述的画面在浏览器里变成了一个能操控的 3D 场景那种成就感比看一百篇教程都强。剩下的路踩着这个起点慢慢往前走吧。
