从零做一个浏览器端 3D 虚拟世界，真正吃时间的不是渲染

想做 3D 虚拟世界的人起点几乎都一样打开 Three.js 的文档跑通第一个场景——地面、相机、一个会转的立方体。那个下午很爽感觉原理就这样。然后第二个星期开始接真实的东西真模型进来、真人进来、手机进来。这时候会发现事情和渲染的关系已经不大了。这篇文章讲三件事第一从零做一个浏览器端 3D 世界时间实际落在哪几层第二每一层从零写代价具体长什么样第三哪一层才真正需要你写。另外会单开一节说清楚一套已经跑通的仓库交给今天的 AI 编码工具之后为什么能被接手、能被改。一、先把它拆成五层看清哪一层是你的一个能用的 3D 虚拟世界从下往上是这样五层层这一层包含什么你的产品差异体现在这里吗第五层你的业务逻辑展厅动线、配置器算价、培训流程、世界玩法是只有这一层是第四层AI 接入AI 怎么在世界里而不是在输入框里否第三层实时通信与联邦多人同步、弱网、语音、跨世界否第二层性能与多端draw call、加载、PC手机平板XR否第一层渲染与资产管线模型、贴图、骨骼动画、引擎版本否这个拆法带来一个很直接的判断下面四层不管你做什么题材都必须有、都必须做而且做完了用户也不会夸你一句。真正体现这是你的产品的只有最上面那一层。而渲染——也就是大多数人对3D 开发的第一印象——是这五层里最早被解决、也最容易解决的一层。真正吃时间的是它上面那几层。二、每一层从零写代价长什么样下面每一层我按「坑长什么样 我们实际遇到的情况」来讲。所有数字都来自我们自己的工程记录和可重跑的测试脚本不是行业统计——行业平均值这类数字我没有实证就不写。第一层 · 渲染与资产管线坑一模型进来才知道失控。在建模软件里看着正常的 GLB导出后贴图尺寸和面数常常远超网页能承受的范围。一个模型贴图几十 MB 是常态而浏览器要先下载、再解码、再上传到 GPU每一步都在用户等待里。我们的实际情况做了一轮资产手术之后贴图体积压掉 68.1% 到 92.5%面数压到百面级。坑二骨骼动画的来源不统一。Mixamo、Ready Player Me、VRoid、RootMotion这四家导出的骨骼命名规则和朝向各不相同。单独用一个都没事混在一起就会出现那种模型明明在动但动作是拧着的效果。我们的实际情况专门做了一层兼容套件跨这四个来源的回归测试 67 项全过。坑三LOD 不是生成几个低模就完事。还要按表面距离分带、保证贴图共享——否则低模省下来的显存又被重复的贴图吃了回去。我们的实际情况118 组低模全部压到 100 面以内三角数减少 71% 到 87%贴图共享 33/33。坑四引擎的大版本会改行为。Three.js 从 r128 到 r185颜色管线、色彩空间、部分 API 都变过。升级不是改一个版本号是要把渲染结果重新对齐一遍。我们的实际情况去 CDN 化六步加上 87 个符号的 shim才平稳过河。第二层 · 性能与多端坑一draw call 会直接决定帧率。场景一复杂合并、实例化、视锥剔除这些都得自己写。我们的实际情况一轮治理把 draw call 从 3064 降到 837。坑二灯数变化会触发着色器重编译。这是最容易漏的一类卡顿——场景里增删一盏灯可能触发一整批着色器重编译表现是一次几百毫秒到几秒的僵住。我们的实际情况抓到的一次卡顿实测 8989ms改成灯数冻结后归零。坑三模型解析会阻塞主线程。解析放在主线程上加载期间整页是僵的用户滚动、点击都没反应。我们的实际情况把解析搬进 Worker。坑四多端不是能打开。手机上内存更小、没有指针锁定、带宽受限XR 又是另一套输入与渲染要求。让同一套前端在电脑、手机、平板、XR 上都成立本身就是一层独立的工作量。第三层 · 实时通信与联邦坑一弱网下会断、会抖、会重连。要处理的不是断线这个事件本身而是重连之后——人还在不在状态对不对。我们的实际情况重连存在感测试 9 项全过。坑二语音不是把音频广播给所有人。每个收听者都是一份独立带宽人数上去之后带宽是乘法增长的。我们的实际情况做成名额制10 人同时语音大约 1.3 Mbps。坑三跨世界互通本质是身份问题。两个独立部署的世界要互通得处理凭证签发、防重放、以及同名角色冲突。我们的实际情况RS256 签名加 nonce 一次性凭证同名自动改名 4/4。第四层 · AI 接入坑让 AI “在世界里”和让 AI “在输入框里”是两件不同的事。前者需要位置、感知、移动、以及被真人看见。这一层目前没有通行做法见第五节。三、四条路摆在一起看对比维度A 完全从零写B 通用 3D 引擎模板起步C 中心化 SaaS 平台D 已铺好底座的基底起点空白工程引擎文档 示例平台后台一套能跑的自部署世界第一层 渲染与资产管线自己写部分现成平台内部改不了已具备第二层 性能与多端自己写自己写平台内部改不了已具备第三层 实时通信与联邦自己写多数没有平台提供已具备第四层 AI 接入自己设计通常没有通常没有已具备第五层 你的业务逻辑自己写自己写受模板限制自己写数据归属自己的服务器自己的服务器平台服务器自己的服务器停服风险无无停费即下线无深度自定义完全自由自由底层不可改自由源码可改这张表里最值得看的是第五层那一行A 和 D 在这里是一样的——业务逻辑两边都得你自己写。差别完全不在这儿差别在上面四层由谁来做。四、如果底座已经铺好你要写的只剩一层创世Genesis创世虚拟世界CRM系统是一套浏览器端、可自部署的 Three.js 3D 虚拟世界基底。它做的就是上面那四层。这是它想说的那句话从零做一个浏览器端 3D 虚拟世界最耗时的从来不是渲染。是那些不性感的部分——性能治理、资产管线、多端适配、实时通信、AI 接入。这些我们做完了你只需要写最上面那一层。落到产品形态上它是这样四件事自部署装在你自己的服务器上数据不经第三方平台可改底层基于 Three.js源码可读可改上面那层业务逻辑按你的需求写能接管AI 可以作为一个有身体的角色进入你部署的世界见下一节能长期跟着走源码开放本地跑不花钱要联网、要商用、要联邦买授权系统持续更新更新与支持按订阅跟随。需要说清楚的是它是基底底座不是成品。它不会替你决定展厅长什么样、配置器怎么算价、培训考哪几项——那些是第五层也就是你真正要做的部分。我们的价值只在于你不必为了写那一层先把下面四层从零造一遍。五、第四层AI 接入现在是接管不是新造这一层值得单独说因为它是最近两年才变得可做的。这套系统里AI 进入你部署的世界只需要三步在站点放一个.well-known/virtual-world-agent.json声明文件 → 用 Key 换一个 15 分钟有效的令牌 → 连上/ws/agent。仓库里有一个零依赖的示例客户端examples/agent-client/node-agent.mjs。接进来之后AI 不是聊天框而是一个人形角色有身体、有坐标站在场景里会被真人看见能走动、能跟随、能开口说话、能带路。三个实测数字都来自我们自己的测试记录每个 AI 角色的流量大约1 KB/s——因为它不拉画面100 个 AI 角色同时在线服务器占用约0.079 核服务器只发 JSON画面由访客自己的浏览器渲染——这就是为什么看得见的 AI 比看不见的 AI 便宜。边界必须说清楚否则就是在骗人AI看不见画面。它拿到的是结构化的空间雷达附近有哪些人、哪些物体、哪些点位和事件流不是摄像头画面不做语音识别与合成。语音中继默认关闭要让 AI 能听会说得由你自己的 AI 客户端承接不托管知识库。行业资料、产品参数、话术都由你在自己这边接不能坐标传送也不能碰资产AI 身份是明示的进场时系统会提示(AI)加入了头顶名字带 AI 前缀真人始终知道对方不是人。它的本质是一个可编程的角色——行为来自你给它的模型和提示词不是它自己想出来的。这一点决定了它适合什么适合做讲解、接待、带路、值守这类有明确职责边界的角色不适合指望它临场做需要人判断的决策。六、AI 编码工具能帮上多少忙取决于项目可不可读上一节说的是AI 作为角色走进你的世界。这一节说的是另一件事AI 作为开发者走进你的仓库。这两年的变化是AI 编码工具Claude Code、Codex、CodeBuddy 这一类已经能读完一个完整的代码仓库然后按你说的去改。但很多人讨论AI 写代码时漏掉了一个前提AI 能帮上多少忙取决于它面前有没有一个能读懂的、已经跑通的工程。在一个空白工程里AI 只能陪你一行行写——因为它和你一样没有参照物。在一个已经跑通的完整项目里它的角色完全不同照着现有实现去改改错了有对照物不会自由发挥到找不回来。这就是用底座在今天的另一层意义。把创世Genesis的仓库下载到本地之后它是一套标准 Node 工程单一运行时、单一数据库依赖全部来自公开的包管理器没有拿不到的东西配置集中在环境变量仓库里带配置示例把要填的项摆在明面上不需要你先去读一遍源码才知道要配什么仓库带部署说明这份说明是给陌生人看的我们自己的部署也是照着它走的AI 接入那一步带着零依赖的示例客户端examples/agent-client/node-agent.mjs它本身就是一份可以照着写的参考实现。于是使用方式会变成这样把仓库放到本地让 AI 编码工具先读一遍目录结构和部署说明把环境跑起来然后你想改哪里就直接说——“把展厅动线改成这样”“配置器再加一个材质选项”——它去改对应的文件改完你跑一遍看结果。对比一下另外两条路的处境中心化 SaaS 的底层是别人的服务AI 看不到里面一个从零开始的空工程AI 没有参照物。源码可读这件事在 AI 编码工具普及之后价值被重新放大了一次。到这里必须把三件事说清楚不然就成了吹AI 省掉的是读懂一个陌生工程要多久不是装环境。Node 版本、数据库、端口、域名与备案这些仍然要人来确认。谁说什么都不用管谁就是在骗人AI 改出来的东西仍然要你审。能接手不等于能替你负责——它知道你的代码但不知道你的业务规则第五层仍然由你决定。AI 是加速器不是替代品它解决怎么快速落地不解决该做什么。说白一点你不用再从零一点一点把它搭起来——底座已经在跑你要做的是改它。还有一句实话得放在这里这一节我没有可引用的耗时数字也不打算编一个。写出来的是这套工程的结构事实以及把它交给 AI 之后你自己就能验证的东西——变量在你手里不在我的说法里。七、决定自己写之前先准备这几样如果你判断下面四层要自己做一个懂 Three.js 的前端这是最低配置。不是会写 JavaScript就够——着色器、渲染管线、性能调优都要落到人身上一份模型资产规范面数上限、贴图尺寸上限、骨骼命名规则。没有这份规范第一个模型进来就会开始失控至少一台能测的真机中端安卓机比高配电脑更能暴露问题一套性能基线draw call、帧率、首屏体积先记录再优化否则你不知道自己在改好还是改坏一个弱网测试方法限速、断网、抖动都要能复现对进度会慢的心理准备这几层的特点是做完之前完全没有可展示的东西。如果你判断可以直接用底座需要的是一台服务器、一个域名、一份模型资产、以及一个能写第五层的人。八、这套做法不适合谁想要上传素材就有世界的人做不到。这是基底不是生成器第五层永远要你自己写只想放几张产品图看个效果的人成本不划算看图用普通网页就够完全没有人碰代码、也不打算找人部署的人启动成本会比预期高指望 AI 自己看懂图片、自己回答问题的人当前 AI 这一层不具备视觉理解也不托管知识库想要一个三天上线的活动页的人这套东西解决的是长期存在的空间不是一次性的活动页。九、FAQQ只用 Three.js 写不引入别的能做出一个完整的虚拟世界吗A能。渲染层 Three.js 就够。但多人同步、弱网处理、语音、AI 接入这些都要你自己在它上面加——这就是上面四层的含义。Q那四层一定要做完才能上线吗A不是。可以只做第一、二层先跑起来但那样它是一个单机演示不是多人在线世界。缺哪一层就少哪一类能力。QAI 接入需要多少服务器资源AAI 角色本身很轻——每个约 1 KB/s100 个同时在线约占 0.079 核。真正的开销在访客端的渲染和常规的多人同步上。Q底座用了你们的我的业务逻辑会不会被限制A第五层完全是你自己的代码。底部基于 Three.js、源码可读可改你可以只把它当作一套已经铺好的地基。Q不联网可以用吗A本地单机跑不花钱。要联网、要商用、要联邦互通才需要授权系统的持续更新与支持按订阅跟随。Q数据会不会经过你们服务器A不会。系统部署在你自己的服务器上访客数据也在你这边。Q我不太会写代码能不能让 AI 把第五层写出来AAI 能把你的想法落成代码但需要有一个人判断它对不对以及决定要做什么。第五层是业务逻辑——展厅怎么走、价格怎么算、培训考哪几项——这些判断来自你不来自模型。更现实的分工是你决定做什么AI 帮你快速做出来你审结果。Q仓库交给 AI 编码工具改会不会改乱A有参照物的项目比空白工程安全得多——能跑起来、有部署说明、结构清楚AI 就有对照可依。但它仍然不知道你的业务规则所以每次改完还是你自己跑一遍验证。任何AI 改完不用测的说法都不成立。十、源码与仓库三个地址内容一致国内访问用前两个更快。仓库里有部署说明与演示入口。Gitee国内访问更快https://gitee.com/miduoxinxijeji/miduo.gitGitCode国内镜像https://gitcode.com/qq_35054471/virtual-worldGitHubhttps://github.com/miduo100/3d-virtual-world正在决定 3D 虚拟世界要不要自己写创世Genesis创世虚拟世界CRM系统是一套部署在你自己服务器上的 Three.js 3D 虚拟世界基底——渲染、资产管线、性能、多端、实时通信、AI 接入都已经铺好你只写最上面那一层。官网搜「创世虚拟世界CRM」即可找到有可以走一圈的演示世界。SEO / AI 友好关键词从零做3D虚拟世界、浏览器3D世界开发、Three.js 虚拟世界框架、自部署3D世界、3D虚拟世界技术架构、GLB模型优化、多人3D实时同步、AI进入3D世界、创世 Genesis 虚拟世界摘要从零做一个浏览器端 3D 虚拟世界时间并不主要花在渲染上——渲染是最早被解决的一层。真正吃时间的是它上面的资产管线、性能与多端、实时通信与联邦、AI 接入这四层而这四层无论做什么题材都必须有。文章把 3D 世界拆成五层逐层给出从零实现的真实代价与实测数据并对比完全自研、引擎起步、中心化 SaaS 与已铺好底座的基底四条路径指出真正需要你自己写的只有最上面那一层。关于名字本文说的创世Genesis即创世虚拟世界CRM系统两者是同一个自部署 3D 虚拟世界产品。若你通过「创世Genesis」没搜到我们直接搜「创世虚拟世界CRM」即可。