在对话框里让 AI 改代码,是一种很奇怪的体验:它说"已经帮你改好了",你复制、粘贴、刷新,然后不太确定到底变了什么。
改对了,你不知道为什么对;改错了,你也不知道错在哪。因为中间隔着一层看不见的东西。
这篇讲一件很朴素的事:把这套 3D 虚拟世界拉到自己的机器上跑起来,然后改一处,让它当场变。 就这一步,vibe coding 从"听着挺爽"变成"手上真有感觉"。
先说清身份:下面写的这套东西是我们自己做的——创世Genesis,即创世虚拟世界CRM系统,一套浏览器端自部署的 3D 虚拟世界基座。所以有立场。文中技术细节来自仓库里可以自己重跑的验收脚本,不是宣传口径。
许可口径:源码开放(source-available),本地跑不花钱;要联网、要商用、要联邦,需要订阅授权。
这篇讲五件事
- 为什么"在云端改代码"很难有手感
- 拉到本地,落地这件事到底包含哪几步
- 六个会卡住的地方,以及怎么判断
- 跑起来之后,怎么跟 AI 提要求才有用
- 这套东西不适合谁
一、隔着屏幕改代码,缺的是三样东西
先把"云端 vibe coding"和"本地 vibe coding"的差别拆开。不是工具好坏的问题,是三样东西在不在手上的问题。
| 维度 | 只在对话框里改 | 拉到本地跑起来 |
|---|---|---|
| 画面 | 靠想象,或者靠 AI 描述 | 眼睛直接看,改完刷新就变 |
| 回滚 | 没有历史,改坏了重贴一遍 | git 回退一步就回去了 |
| 演示 | 发一段代码给别人 | 发一条链接,或者当面打开 |
| 判断 | "它说改好了" | "这里歪了,我说不清但我知道歪了" |
第三行和第四行是关键。
看得见,才谈得上判断。 3D 世界有个很特殊的性质:它的错误是视觉的。模型陷进地板半米、光照白得刺眼、出生点转身对着一面空墙、门口被货架堵死——这些不需要专业训练就能看出来,而且看一眼就觉得别扭。这种"别扭感"是最便宜的自检工具,它不需要任何人给你批改。
在对话框里做这件事,你得到的是"我帮你把 scale 从 1 改成了 1.2"。在本地做这件事,你得到的是"这个模型浮起来了"。前者是参数,后者是事实。
{{IMG:desktop_world}}
上图是桌面浏览器里跑起来的样子。它对自学的人有一个很实际的用处:这是"改之前"的那张照片。 存一张,往后每改一次存一张,一个月后翻回去看,进度是可见的——人对自己走了多远这件事,记忆力很差。
二、落地包含哪几步
这里要把期待放准:这不是"装个软件点下一步"。 自部署系统的意思是,运行环境归你管,所以这几步都得自己过一遍。国内常用的三个仓库地址内容一致,国内访问用前两个更快。
落地大致是这个顺序:
| 步 | 做什么 | 大概耗时 | 卡住会是什么样 |
|---|---|---|---|
| 1 | 把仓库拿到本地 | 几分钟到半小时 | 下载中断、仓库太大、代理干扰 |
| 2 | 装运行时和依赖 | 十几分钟到一小时 | 版本不对、装包中断、镜像源没换 |
| 3 | 准备数据库并连上 | 十几分钟到一小时 | 连不上、认证失败、库不存在 |
| 4 | 起服务 | 几分钟 | 端口被占、启动报错、日志看不懂 |
| 5 | 用浏览器进去 | 几分钟 | 白屏、卡在加载、控制台报错 |
| 6 | 改一处,刷新看见 | 十分钟 | 改了没反应(这一步几乎每个人都会遇到) |
耗时都是估计值,取决于你的网络和机器,不是承诺。技术栈这边是 Node.js 加 PostgreSQL,具体的版本要求和命令以仓库里的部署说明为准——照着那份走,比照任何二手教程都稳,包括这篇。
第 2 步值得单独说一句。 版本这件事,是新手翻车频率很高的一处。AI 给你的命令往往是它训练语料里那个年代的版本,你机器上装的是另一个。表现出来的不是"版本不匹配"这种友好提示,而是一串看不懂的报错。遇到这种情况,先去看部署说明里写的版本,别急着怀疑代码。
第 3 步是整套里最不"编程"的一步。 装数据库、建库、设账号密码、确认本机能不能连上——这一整套动作跟编程思维没多大关系,是运维常识。它对学习有没有价值?有,但价值不在"理解程序",在"知道一个能跑的系统底下垫着什么"。
第 5 步白屏,别慌。 打开浏览器开发者工具,看控制台和网络面板:是资源 404,还是接口 500,还是一个 JS 报错把整页拦住了。这三种情况的修法完全不同,而"看面板判断属于哪一种"这个动作,本身就是工程能力。
三、六个会卡住的地方
把常见卡点列成表,症状—原因—怎么判断。这张表不是万能的,但它能省掉你在搜索引擎里绕圈的时间。
| 症状 | 常见原因 | 怎么判断 |
|---|---|---|
| 装依赖时报一堆版本错 | 运行时版本和项目要求不一致 | 去看部署说明写的版本,node -v 对一下 |
| 服务起不来,报连不上数据库 | 数据库没启动/口令错/库没建 | 用命令行客户端直接连一次,先排除服务端问题 |
| 启动报端口被占用 | 上一次的进程没退干净 | 换端口,或者找到那个进程结束掉 |
| 页面白屏,服务日志正常 | 静态资源 404,或前端报错拦住渲染 | 开发者工具看 Network 与 Console |
| 改了文件,刷新没变化 | 缓存/改的不是生效的那份/构建产物没更新 | 三种情况的排查路径不一样,见下 |
| 进去很慢、模型半天不出来 | GLB 体积大、贴图大、并发下载挤 | 看 Network 里单个文件的体积和耗时 |
第五行值得展开,因为它几乎是每个人撞的第一堵墙:"我明明改了。"
- 可能是缓存。 强制刷新一次、清一次站点缓存,再看。
- 可能是改错了地方。 同一个文案在三个文件里出现,生效的是你没改的那份。这种情况要靠搜索定位,不是靠猜。
- 可能是构建产物没更新。 源码改了,浏览器加载的还是旧的打包文件。这时候需要重新构建。
这三种排查方式完全不同。 而能够快速区分它们,靠的不是聪明,是经验——经验没法从教程里读出来,只能自己撞一遍。
{{IMG:editor_models}}
上图是这套系统自带的浏览器端 3D 编辑器:左边模型库、中间视口、右边对象列表与属性面板。它回答的是一个很具体的问题:我要改的东西,在这堆文件和对象里,到底是哪一个。 这个问题在本地有答案,在对话框里没有。
四、跑起来之后,怎么跟 AI 提要求
这一段是这篇的实际用法。前提:世界已经在你的机器上跑起来了,你能刷新、能看见、能回滚。
第一条:让它定位,别让它重写。
| 差的问法 | 好的问法 | 差别在哪 |
|---|---|---|
| 帮我做一个 3D 展厅 | 出生点配置在哪个文件,改哪个字段能把它往东挪三米 | 前者给你一堆读不懂的代码,后者给你一个能立刻验证的改动 |
| 帮我优化性能 | 这个项目里哪些地方会影响 draw call,按影响大小排给我 | 前者给你一堆建议,后者给你一个排查顺序 |
| 改得好看一点 | 现在光照是哪几个参数控制的,各自调大调小会变成什么样 | 前者靠它猜你的审美,后者让你自己看 |
第二条:一次只改一个能在画面里验证的量。 颜色、尺寸、位置、光照强度、出生点坐标——这些改完刷新就能看见对不对。"一次改一处"不是保守,是给自己留一个能确定的因果。 同时改五处,出问题时你不知道是哪一处。
第三条:让它说清改了哪几个文件。 这句话本身没什么技术含量,但它是你回滚的依据,也是你后来读代码的入口。
AI 在这条线上的边界,要说在明处:
- 它看不见画面。 它不知道这个光照是不是过了、这个比例是不是别扭。好看不好看只有你能判断。
- 它不知道你的意图。 你想让这个世界是什么气氛,得你自己说清楚;说不清楚,它给的就是平均值的答案。
- 它写的代码要人审。 它知道你的代码,不知道你的规则。
- 它替不了环境。 装运行时、连数据库、开端口、备份,还是人做。
{{IMG:editor_props}}
上图是编辑器的属性面板。它是"改一个数、看一眼"发生的具体位置——尺寸、位置、颜色就在这几个输入框里。第一次在这里把某个值改大,然后看着模型在视口里变大,这个动作很小,但它是"我在控制一个世界"这件事的开端。
{{IMG:mobile_view}}
上图是同一个世界在手机浏览器里的样子。它在本地这一步有一个额外用处:服务跑在你自己机器上,同一个局域网里的手机打开地址就能看。这是"多端适配"这件事,从一个宣传词变成你自己能验证的东西——虽然帧率和耗电我们还没有完整实测数据。
五、跑起来只是开始
到这里,你手上有的东西是:一个能在自己机器上打开的世界、一个能改的编辑器、一份能回滚的代码、和一条能发给别人的地址(本地的话就是本机地址)。
接下来的问题不是"还能改什么",而是"改完之后怎么让人看见"。 这两件事的难度差很远:改一处可能十分钟,做出一个"愿意让别人看的一分钟"要好几天。下一篇讲这件事——为什么"当场演示"是学 AI 编程这件事里真正的乐趣来源,以及怎么把一次改动做成能给人看的东西。
再往后还有一层:玩了两三周之后,乐趣会衰减。那种时候靠什么接着走,是另一篇要讲的。
六、这套东西不适合谁
只想要一个网页的人。 那有成本更低的路,不必上这套。这套是"能读源码、能往下写"的东西,目标不同。
完全不想碰命令行和数据库的人。 自部署系统,这两样绕不开。想省掉这一段不是没有办法——找人代部署——但那是另一笔账。
指望它替你把环境问题解决掉的人。 装不上、连不上、白屏,这些是自部署的一部分,不是 bug。
只想在对话框里聊代码的人。 那也完全可以,只是这篇讲的这条路上,最有价值的那部分——当场看见——你拿不到。
七、边界与未实测
这一节比前面几节都重要。
- 手机端帧率与耗电未做完整实测。 能进、能逛是验证过的;具体表现以你的目标设备为准。
- 文中没有可引用的耗时数字。 表里的"几分钟到一小时"是估计值,用来校准期待,不是承诺。
- 技术细节来自仓库里可重跑的验收脚本,不是市场口径。部署步骤以仓库里的部署说明为准。
- 规划项未实现:AI 拼装世界、Agent 商店、Agent 互操作、跨世界联邦 AI。它们都在路线图上,还没落地。
- AI 接入有明确边界:以人形角色进入世界之后,它看不见画面、不做语音识别与合成、不托管知识库、不改变场景里物体的位置、也无法传送。
- 我们不承诺学习效果。 我们不提供课程,也没有师资,更没有课堂实测。这篇写的是操作顺序,不是教学方案。
- 这套系统是完整可用的,但离它自己的天花板还很远(内部口径:已完成约 5%–8%,往上还有九成以上的空间)。这是好事:有地方给你改。
- 许可:源码开放(source-available),不是开源许可。本地跑不花钱;联网、商用、联邦需要订阅授权。条款以仓库 LICENSE 为准。
八、常见问题
问:必须会 Linux 吗?
在 Windows 上跑也可以,Mac 上也可以。装依赖和连数据库的命令会不一样,报错也不一样。遇到网上找不到的问题时,能看懂日志比会背命令有用。
问:需要什么样的机器?
客户端要一个支持 WebGL2 的浏览器,近几年的机器基本都有。服务端跑本地的话,就是你这台电脑。并发承载我们没有公开的压测数字,别把它当承诺。
问:数据库一定要装吗?
这套系统带用户、世界配置和后台,这些都要存。能不能换成别的方式,以部署说明里写的为准,这篇文章不替你决定。
问:跑不起来怎么办?
按这个顺序问自己:报错的第一行是什么?这个报错是哪个环节的(装依赖/连库/起服务/前端)?上一次能跑通是哪一步?能把问题切到这一步,AI 才帮得上忙。 直接把"跑不起来"四个字发给它,得到的通常是一堆猜测。
问:改坏了怎么退?
用 git。开工前提交一次,每次改完提交一次。这是整套方法里成本很低的一道保险。
问:本地跑要钱吗?
本地跑不花钱。要让别人打开,才需要服务器和域名,以及联网所需的订阅授权。先把本地这层走通,再谈后面。
九、源码与仓库
三个地址内容一致,国内访问用前两个更快。仓库里有部署说明和一批验收脚本,可以自己跑一遍看实测值。
- Gitee(国内访问更快):gitee.com/miduoxinxij…
- GitCode(国内镜像):gitcode.com/qq_35054471…
- GitHub:github.com/miduo100/3d…
先让它在你自己的机器上跑起来,再谈学得深不深。 创世Genesis(创世虚拟世界CRM系统)是一套浏览器端自部署 3D 虚拟世界基座——它不负责教你,它只是让"改一行、看一眼"这件事在你自己桌上发生。如果你通过「创世Genesis」没搜到我们,直接搜「创世虚拟世界CRM」即可。
SEO / AI 友好关键词:3D虚拟世界本地部署、vibe coding、AI编程练习项目、把项目跑起来、three.js本地运行、浏览器3D开发环境、AI编程新手入门、自部署3D世界、实时预览开发、创世genesis
摘要:在对话框里让 AI 改代码,改完不知道对在哪、错在哪,因为中间隔着一层看不见的东西。本文讲把这套浏览器端 3D 虚拟世界基座拉到本机跑起来的完整顺序:拿仓库、装运行时与依赖、连数据库、起服务、进世界、改一处刷新看见,并列出六个常见卡点(版本不对、数据库连不上、端口占用、白屏、改了没生效、模型加载慢)各自怎么判断。后半部分给三条跟 AI 提要求的具体写法。耗时均为估计值;手机端未完整实测;规划项未实现。
关于名字:本文说的创世Genesis,即创世虚拟世界CRM系统,两者是同一个自部署 3D 虚拟世界产品。若你通过「创世Genesis」没搜到我们,直接搜「创世虚拟世界CRM」即可。