3D 网站：什么时候值得做，以及如何保持快速

简短回答

当主题本身具有空间性，或者在其中移动探索能解释图片无法说明的内容时，3D 网站就值得做：一件你想转过来看的产品、一个地点、一个数据集、一个世界。如果它只是在装饰一个用照片或短视频就能解释清楚的页面，那就不值得。无论哪种情况，3D 层在下载体积、电量消耗和无障碍方面都有实实在在的代价，所以要让页面在没有它的情况下也能正常使用，并把 3D 当作一种增强。

本指南基于我们自己的两个项目：Janus Observatory，一个包含十个 3D 世界的浏览器体验；以及 dardo.studio，其首页以一个实时 3D 场景开场。

什么时候 3D 值得做

• 访客需要从多个角度查看某样东西：一件产品、一栋建筑、一台设备。
• 空间本身就是故事：一张地图、一份场地规划图、一段穿越多个地点的旅程。
• 交互比文字更快地解释一个系统，例如比较不同情景或探索数据。
• 品牌体验本身就是产品：发布会、展览和营销活动，在这些场合氛围很重要，访客也期待去探索。

什么时候不值得

• 3D 场景重复了标题和一张图片已经表达的内容。
• 大多数访客使用中端手机、通过移动数据访问，只需要快速获取一个信息，例如价格、地址或营业时间。
• 上线之后，团队里没有人会维护模型、代码和降级方案。

3D、视频还是图片？

WebGL 可以在所有现代浏览器中运行。WebGPU 更新，在某些工作上更快，但支持情况仍不一致，所以要规划降级方案。dardo.studio 的 3D 入口会先尝试 WebGPU，不支持时回退到 WebGL 2，而服务、作品和联系页面都是纯 HTML，从不需要等待 3D 场景。

开发 Janus Observatory 的经验

Janus Observatory 把十个已发布的地球未来情景，变成了一个包含 17 个章节的故事、一本地图集和一座观测台，配有十个原创的低多边形世界和一位关节可动的外星天文学家。它运行在 Cloudflare Workers 的免费方案上，而该方案限制了应用的大小。项目 2026 年 9 月 27 日的发布报告记录了让它保持快速所做的工作：

• 压缩模型并保留降级方案。59 个 3D 模型以 gzip 版本交付，总计 8.2 MB，而不是 15.8 MB，下载量减少 47.9%。无法解压这些文件的浏览器会获得原始文件。
• 在主线程之外解码，用完即停。Meshopt 解码在单个后台 worker 中运行，空闲五秒后自动关闭。
• 设定 JavaScript 预算并严格执行。首页初始 JavaScript 经 gzip 压缩后为 197,059 字节，预算为 256,000 字节，构建过程会对此进行检查。
• 警惕请求风暴。Next.js 和 OpenNext 技术栈中的一个推测性预取循环，在一次失败的浏览器追踪中发出了 11,704 个请求。修复方法是关闭这些链接的预取，现在的测试要求推测性请求为零。
• 固定分辨率，而不是追逐帧率。画布以固定的 1 到 1.5 设备像素比渲染。报告还撤回了一个依赖于降低分辨率的早期帧率数据，因此我们不引用任何帧率数字。

让页面在没有 3D 时也能使用

Janus 有一条决定其他一切的规则：核心体验必须在没有 WebGL、也没有 AI 的情况下正常运行。关闭 JavaScript 时，全部十个情景记录都能加载；控件在没有 WebGL 时也能使用；键盘旋转、可见焦点和减少动态效果都是随每个功能一起构建的。它的无障碍页面列出了各项控件、非视觉替代内容和已知的局限。目标是 WCAG 2.2 AA 级，并通过在 Chromium、Firefox 和 WebKit 中运行的自动化测试进行检查。

这条规则也有助于搜索引擎和 AI 助手：文字、名称和数据都在 HTML 中，而不是在画布里。

快速、无障碍的 3D 页面检查清单

1. 先写出没有 3D 的页面。如果 HTML 版本讲不通，3D 也救不了它。
2. 确定 3D 要解释什么，并删掉只为看起来厉害而存在的部分。
3. 设定预算：在开始建模之前，为 JavaScript、模型体积和纹理尺寸设定预算，并在构建中检查。
4. 压缩模型：使用 meshoptimizer 等工具，以 glTF 格式提供模型；当你依赖 DecompressionStream 等较新的浏览器功能时，保留一份未压缩的降级版本。
5. 在内容之后加载场景，而且只在它即将进入视野时加载。
6. 限制像素比，以免高密度屏幕渲染四倍的像素。
7. 遵循 prefers-reduced-motion 设置，为每个交互提供键盘操作方式，并在每个画布旁边提供文字替代内容。
8. 在真实的中端手机上测试，并在不止一种浏览器引擎中测试，上线后持续关注 Core Web Vitals。

成本如何

3D 会在设计和开发之外增加建模、优化和测试的时间，而降级方案是工作的一部分，不是额外项目。我们报价时，它会体现在我们在哥伦比亚做网站要多少钱指南所列成本因素中的“定制动效、3D 或交互式数据”这一项。

Dardo 如何构建 3D 网站

我们通过交互式 3D 网站服务设计和构建 3D 体验，并通过创意开发服务完成较轻量的动效和滚动交互。我们为 Hyper 使用 React Three Fiber 打造了一个滚动驱动的 3D 故事，把零散的信号整合成一个完整的客户画像。如果你有一个需要空间才能被理解的想法，告诉我们。