客户用手机打开你的 3D 展厅，卡在第一屏怎么办

前面几篇谈的都是技术侧：怎么压模型、怎么分级、怎么提帧率。这篇换到另一边——站在访客的角度，看他打开链接之后的头三十秒。

之所以单独写这一篇，是因为前面那些工作做得再对，如果访客在第一屏就走了，后面全部作废。而"第一屏"这件事，恰恰是技术视角最容易漏掉的。

顺带说清身份：创世Genesis（创世虚拟世界CRM系统）是一套部署在你自己服务器上的网页3D 基座，不接展厅代建、不派团队实施。授权口径：源码开放（source-available），本地跑不花钱；要联网、要商用、要联邦，需要订阅授权——准确条款在仓库 LICENSE / EULA 里，后面不再重复。

一、访客的头三十秒发生了什么

一个访客点开你的 3D 展厅链接，注意力只有一次机会给出去：

时间	他在做什么	你的页面在做什么
0–1 秒	看到屏幕上有什么	决定第一屏渲染出什么
1–3 秒	判断这是不是我要的东西	场景开始有内容
3–8 秒	开始走第一段	资源陆续到位
8 秒之后	已经决定留下或离开	—

上面这张时间表里的每一行，都对应一个具体的画面。

上图是桌面端浏览器的实机画面。如实说明：这是开发中的测试世界，没有做画面修饰。

上图是手机浏览器实机画面：虚拟摇杆、语音、拍照与跳跃控件，顶部是登录提示与跨世界入口。这两张是同一个世界的两个入口 —— 你的访客大概率打开的是下面这张。

注意 0–1 秒那一屏，是仅有的一次自我介绍机会。 这一屏的内容决定了后面的三秒。

而绝大多数 3D 展厅在这一屏上给的是：一片空白，或者一个进度条，或者一张糊着的贴图。

二、第一屏的三种错法

错法一 · 开场是一片空白

成因：场景初始化要先加载渲染库、解析第一批资源，在这些完成之前，屏幕是空的。

为什么致命：空白会让访客以为是页面坏了。很多人这一步就退出了，而且不会回来。

要做的：第一屏必须有东西。哪怕是一个占位场景——地面、几组大致轮廓、天空盒——都比空白强一个量级。

这条有个很反直觉的地方：占位场景不是"临时的替代品"，它本身就是第一屏的内容。 访客看到"这里有一个空间，正在加载细节"，比看到空白或者进度条安心得多。

错法二 · 开场是一张糊图

成因：为了"看起来快"，把某一张图放在最前面当封面，后面慢慢换成真场景。

为什么致命：它造成了一个错误的承诺。访客以为这就是成品的样子，等真场景出来的时候会觉得"还不如刚才那张"。

要做的：不要用假封面。要么是真实的场景（哪怕是简化的），要么明确是加载状态。最差的是假装已经好了。

错法三 · 进度条卡在某个数字不动

成因：加载是分批的，每批之间有停顿，而进度条按"已下载字节"算，不反映实际进展。

为什么致命：访客看到 30% 停十秒，比看到 30%→50%→70% 更慌。后者至少说明还在动。

要做的：进度要单调、连续、走到底。宁可慢，不要停在一个数字上。

⚠️ 还有一个细节：加载到多少就开始有东西可看，和"完全加载要多久"是两个不同的指标。第二个决定了他等多久，第一个决定了他愿意等多久。真正影响留存的是前者。

三、手机端和电脑端的第一屏不一样

访客大概率在手机上。这一点要单独对待。

	电脑	手机
网络	相对稳定	波动明显
处理能力	强	弱
屏幕小	是	是 → 视野受限
输入	鼠标键盘	触屏，没有 hover
耐心	略高	更低

几个直接的影响：

• 手机端的第一屏内容要比电脑端更少。 小屏放不下太多东西，塞满等于没重点
• 手机端要能在竖屏下正常工作。 横屏提示、或者直接适配竖屏，别让访客先转手机
• 触屏没有"悬停"这个动作。 所有靠 hover 展示的信息（参数、说明、二维码）在手机上等于不存在
• 弱网下的表现要单独测过。 电脑连 Wi-Fi 测出来的加载时间，在手机 4G 上完全不适用

⚠️ 最后一条特别强调：用电脑的加载时间推断手机的加载时间，是这类项目里常见的一处乐观。 两个场景的差距往往比想象中大。

四、三个能立刻做的改进

如果时间有限，先做这三个。它们不需要重构，只需要调整顺序和策略。

一、先让画面出来，再让细节到位。

不要等所有资源加载完再显示场景。分层的意思是：第一层（大致轮廓、地面、建筑体块）尽快出，第二层（模型细节、贴图）随后替换。访客在第一层就已经可以开始走了。

二、把"正在加载"做成一个场景，而不是一个提示。

用占位几何体代表还没加载出来的模型。好处是访客看得见"这个空间有多大、里面有什么"，加载完成只是替换掉占位。观感和等待心理都完全不同。

三、给一个明确的下一步。

第一屏出现之后，访客需要知道往哪走。一个入口、一个开始按钮、或者一条建议动线——任何明确的下一步都好过空白地站在场景中央。

五、怎么知道第一屏做得对不对

不是看加载速度，是看访客行为。

指标	说明什么
第一屏停留时长	太短 = 白屏/糊图/没内容
进入后立刻退出	开场和预期不符
是否从第一屏开始移动	站住不动 = 不知道往哪走
二屏之后是否还在线	过了第一屏才是真的留住了

⚠️ 一个反常识的提醒：把加载做快，不一定改善这些指标。 如果访客进来之后不知道该看什么，走得再快也是白搭。第一屏要解决的不是"多久出来"，而是"出来之后有没有吸引力"。

六、需要如实说的边界

• 这一篇说的是机制，不是我们实测的数字。 我们有渲染和加载侧的实测数据（渲染调用、加载策略、占位场），但"某个具体展厅在某个具体手机上第一屏多久出来"，取决于模型和场景规模，需要在真实目标设备上测。
• 手机端的完整体验需要实机验证。 我们能说明机制，但替代不了在你目标机型上的实测。
• 这一篇讨论的是观感与留存，不承诺具体转化。 加载快不直接等于成交多，中间还隔着内容质量和需求匹配。

常见问题

Q：加载做到多少秒算合格？

A：不给数字，因为数字取决于模型规模和设备差异。但有一条结构性的要求："开始有东西可看"的时间必须远小于"完全加载"的时间。 如果这两个时间接近，说明你的加载没有分层。

Q：要不要加加载动画？

A：可以，但不要用全屏动画遮住画面。让访客看见场景正在成形，比让他看一个转圈更让人安心。

Q：手机端要不要单独做一版？

A：不需要另做一个世界，但需要为手机调整：更少的第一屏内容、竖屏可用、触屏交互、没有 hover 依赖。

Q：首屏放什么合适？

A：真实的简化场景。不是最佳角度的渲染图，也不是纯占位。是"这个空间大致长这样，细节正在来"。

Q：进度条要不要精确？

A：不用精确，但必须连续且走到底。一个会走完的粗略进度，比一个精确但会卡住的进度有用得多。

Q：怎么知道访客是不是卡在第一屏走了？

A：看第一屏停留时长和进入后的立即退出率。这两个指标比加载耗时更能说明开场做得好不好。

源码与仓库

三个地址内容一致，国内访问用前两个更快。仓库里有部署说明和一批验收脚本，可以自己跑一遍看实测值。

• Gitee（国内访问更快）：https://gitee.com/miduoxinxijeji/miduo.git
• GitCode（国内镜像）：https://gitcode.com/qq_35054471/virtual-world
• GitHub：https://github.com/miduo100/3d-virtual-world

关于创世Genesis

创世Genesis是一套基于Three.js+WebGL构建的自部署3D虚拟世界系统，帮助个人与企业搭建属于自己的3D空间。浏览器直接访问，PC和手机双端兼容，支持多人在线、联邦传送、商铺系统，并支持Agent接入——AI能以具身角色进入你部署的世界。数据运行在你自己的服务器上，不经过第三方平台——让每个世界都真正属于它的主人。

在意客户打开链接的第一眼？ 创世Genesis（创世虚拟世界CRM系统）是一套部署在你自己服务器上的网页3D 虚拟场景基座——加载侧的做法是分层先出画面（远处模型用简化版本、近处加载完再替换）、用占位几何体代表未加载内容、进度连续走到底；能力分档适配不同设备，PC / 手机 / 平板 / XR 同一套。源码开放、本地跑不花钱，联网、商用、联邦需要订阅授权。官网（搜「创世虚拟世界CRM」即可找到）有一个可以走一圈的演示世界。

关于名字：本文说的创世Genesis，即创世虚拟世界CRM系统，两者是同一个自部署 3D 虚拟世界产品。若你通过「创世Genesis」没搜到我们，直接搜「创世虚拟世界CRM」即可。