ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

AI协作开发:用Three.js打造《堡垒之夜》风格3D游戏原型

AI协作开发:用Three.js打造《堡垒之夜》风格3D游戏原型 做一款能玩的 3D 游戏曾经是一条非常长的流水线策划写文档、程序调引擎、美术建模、测试排 Bug一个最小可玩的“采集—建造—射击”循环小团队往往也要做上一两个月。但这两年情况变了。大量开发者开始用 AI 编程工具写游戏 Demo而且不是写“贪吃蛇”那种 2D 小玩具是带地形、角色控制器、建造系统、武器射击和 AI 敌人的 3D 原型。本文要聊的就是怎么用 AI 协作的方式从零开始做一个《堡垒之夜》风格的网页 3D 游戏原型。先给一个明确判断AI 确实能让一个没有游戏开发经验的人在几天内跑通“大逃杀”类游戏的核心机制 Demo但前提不是你找到某个“神级模型”而是你把一个巨大的需求拆成 10 个 AI 可以逐个交付的小任务并在每个任务后做人工验收。这篇文章会围绕“10 个 AI 协作任务”展开从技术选型、环境准备、任务拆解到核心代码实现、运行验证、常见坑位和工程建议。读完你可以得到两样东西一个能跑的 3D 游戏原型以及一套以后做任何 AI 辅助开发项目都能复用的工作方法。1. 先搞清楚AI 协作能做游戏但到底能做多深很多人第一次用 AI 写游戏时会直接输入一句“帮我做一个《堡垒之夜》。” 然后期待屏幕上出现一个完整可玩的大逃杀游戏。结果通常是 AI 给出一堆代码跑起来却只是一个转动的方块甚至直接报错。这不是 AI 不够强而是需求粒度的问题。目前大语言模型最擅长的事情是“模式复现”。3D 场景创建、角色控制器、射线检测、建造放置、音量管理这类功能在 GitHub、技术博客、官方文档中都有海量示例AI 见过足够多的样本所以生成质量相对高。但游戏开发里还有大量非模式化决策玩法节奏怎么定、美术风格怎么统一、十几个系统之间怎么耦合、网络同步怎么做。这些不是靠“看过很多代码”就能解决的。所以用 AI 做游戏要有一个清醒的分层目标层级AI 的可靠性示例单文件小脚本很高点击生成方块、计算伤害、随机生成地图坐标游戏原型 Demo较高带地形、角色、建造、射击的最小可玩循环小型成品游戏中等有完整关卡、成长系统、平衡调整商业级项目较低深度引擎定制、复杂网络同步、海量美术资产本文定位在第二层做一个能展示核心玩法机制、可以给别人试玩的 3D 原型。这个目标非常适合 AI 协作因为它的代码量在几百行到一千行左右每个模块足够小AI 生成的错误也容易定位。另一个常见误区是“让 AI 一口气把所有功能写完”。十个功能同时提AI 的上下文窗口会被塞满代码之间很容易互相矛盾。更稳的方式是把项目拆成 10 个有先后依赖的任务每个任务只做一件事做完之后由人验证再让 AI 进入下一个任务。这就是本文说的“10 个 AI 协作任务”的核心思路。2. 技术选型为什么用 Three.js 浏览器做原型先说明一点本文要做的是《堡垒之夜》核心玩法机制原型——采集、建造、射击、移动、缩圈这类玩法循环不是复刻官方美术素材、地图或完整商业化内容。所有资产都用程序生成的简单几何体代替。在选型上可以先对比几条路方案上手成本AI 生成代码质量分享演示适合阶段Unreal Engine高需要装大型 IDE中等但项目结构复杂需要打包商业项目Unity中高中等C# 代码较多需要打包中小型成品Godot中中等教程不如前两者多需要打包独立游戏Three.js Vite低浏览器直接跑高训练语料丰富一条链接就能分享原型验证对于“用 AI 从零做一个能跑的游戏原型”这个目标Three.js 的优势很明显不需要安装大型引擎不需要理解复杂的工程配置浏览器就是运行环境。更重要的是Three.js 的官方示例和社区文章极多这对 AI 模型的生成质量有直接正反馈。技术栈非常轻量Three.js3D 渲染引擎负责场景、相机、光照、网格体Vite本地开发服务器和打包工具vanilla JavaScriptES6 模块直接用原生 JS 写逻辑VS Code 任意具备代码生成能力的 AI 工具关于 AI 工具主流的 Cursor、GitHub Copilot、通义灵码以及各类对话式大模型都可以完成本文的任务。不同工具在代码生成上的差异没有想象中大关键是任务拆得够不够细。3. 环境准备五分钟搭好 AI 开发工作台这个项目对环境的要求非常低只要四个东西Node.js、VS Code、Chrome 浏览器、一个 AI 工具。第一步确认本机安装 Node.js 18 或更高版本。在终端里执行node -v npm -v如果没装去 Node.js 官网下载 LTS 版本即可。这里不写死具体版本因为 Vite 和 Three.js 的版本迭代很快但 Node 18 以上的兼容性没有问题。第二步用 Vite 创建一个原生 JavaScript 项目npm create vitelatest fortnite-prototype -- --template vanilla cd fortnite-prototype npm install如果npm create vitelatest的交互提示让你选择模板选择vanilla和JavaScript即可。第三步安装 Three.jsnpm install three第四步启动开发服务器npm run dev终端会输出一个本地地址通常是http://localhost:5173用 Chrome 打开。此时浏览器里应该是一个 Vite 默认页面。为了确认 Three.js 能用我们把index.html和main.js替换成最小 3D 场景。下面这一步也可以直接交给 AI 来做但手动执行一遍能帮你建立对项目的控制感。4. 10 个任务的协作沙盘整个项目怎么拆这是全文最核心的方法论。所谓“10 个 AI 协作”不是让 10 个 AI 同时开工写一个项目——那会让代码合并变成灾难。更稳妥的模式是把项目拆成 10 个任务切片AI 依次执行人工在每个任务完成后验收。你可以理解成“一个人做产品经理AI 当外包开发”。下面是推荐的任务拆解表任务编号任务名称核心目标验收标准01项目初始化与 3D 场景建立 Vite 项目跑出一个带地面、光照、相机的 3D 场景浏览器能显示三维草地场景02地形与静态物体生成随机生成树木、岩石、建筑方块形成可探索区域场景不再空旷有障碍物03玩家控制器支持 WASD 移动、鼠标视角控制、碰撞约束能在场景中自由走动不会掉出地面04建造系统点击方块表面在相邻位置放置新的方块能连续搭出建筑结构05武器与射击系统射线检测命中目标命中反馈准星指向方块时点击有变色反馈06敌人 AI 与伤害判定生成简单敌人向玩家移动被击中后消失能打死一个自动移动的敌人07HUD 与游戏状态显示血量、资源数量、击杀数数值随操作实时变化08音效与视觉反馈命中特效、开枪音效、资源变化提示操作有感官反馈09玩法机制缩圈与资源节奏实现逐渐缩小的安全区资源刷新安全区动画可见玩法有节奏10性能优化与 Bug 修复检查帧率、修复明显 Bug、整理代码游戏运行流畅控制台无报错任务之间是有依赖关系的先有场景才能放角色先有角色才能测建造和射击先有建造和射击才能设计敌人。排序不当会导致返工。每条任务都建议使用同一个提示词结构**背景 技术栈 当前状态
返回列表