---
title: "3D 网站：何时值得做，如何保持快速 — Dardo"
description: "3D 网站何时值得做？3D、视频与图片怎么选，以及我们如何让 Janus Observatory 的十个 3D 世界保持快速，并在没有 WebGL 时也能使用。"
url: "https://dardo.studio/zh-Hans/blog/3d-websites/"
language: "zh-Hans"
translations: {"en":"https://dardo.studio/en/blog/3d-websites/","es":"https://dardo.studio/es/blog/paginas-web-3d/","fr":"https://dardo.studio/fr/blog/sites-web-3d/","de":"https://dardo.studio/de/blog/3d-website/","it":"https://dardo.studio/it/blog/siti-web-3d/","pt":"https://dardo.studio/pt/blog/sites-3d/","nl":"https://dardo.studio/nl/blog/3d-websites/","sv":"https://dardo.studio/sv/blogg/3d-webbplatser/","pl":"https://dardo.studio/pl/blog/strony-internetowe-3d/","uk":"https://dardo.studio/uk/blog/3d-websites/","ru":"https://dardo.studio/ru/blog/3d-websites/","ar":"https://dardo.studio/ar/blog/3d-websites/","hi":"https://dardo.studio/hi/blog/3d-websites/","th":"https://dardo.studio/th/blog/3d-websites/","ja":"https://dardo.studio/ja/blog/3d-websites/","ko":"https://dardo.studio/ko/blog/3d-websites/","zh-Hant":"https://dardo.studio/zh-Hant/blog/3d-websites/"}
updated: "2026-10-13T00:59:51.977Z"
---

[博客](https://dardo.studio/zh-Hans/blog/)

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

3D 网站什么时候值得做，什么时候视频或图片效果更好，以及我们如何让 Janus Observatory 的十个 3D 世界保持快速、无障碍且易用。

作者： [Nicolás Cerón](https://dardo.studio/zh-Hans/studio/) ·2026年10月12日

![夜晚，一座古老天文馆的内部：黄铜星空投影仪在深蓝色穹顶上投下点点琥珀色的光，一颗小小的多面深红色星球悬浮在它上方。](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp)

## 要点

- 当主题具有空间性，或者探索它能解释图片无法说明的内容时，3D 就值得做；否则，图片或视频通常效果更好。
- 让页面在没有 WebGL 的情况下也能使用，并把 3D 层当作增强；这也能让搜索引擎读取到文字和数据。
- 在 Janus Observatory 中，gzip 版本把 59 个 3D 模型的传输量从 15.8 MB 降到 8.2 MB，同时保留原始文件作为降级方案。
- 在建模之前为 JavaScript 和模型体积设定预算，并在每次发布时检查。
- 限制像素比，遵循减少动态效果设置，为每个交互提供键盘操作方式，并在真实的中端手机上测试。

## 简短回答

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

本指南基于我们自己的两个项目：[Janus Observatory](https://dardo.studio/zh-Hans/work/janus-observatory/)，一个包含十个 3D 世界的浏览器体验；以及 dardo.studio，其首页以一个实时 3D 场景开场。

## 什么时候 3D 值得做

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

## 什么时候不值得

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

## 3D、视频还是图片？

| 方案                       | 适合                 | 需要注意                       |
| ------------------------ | ------------------ | -------------------------- |
| 基于 WebGL 或 WebGPU 的实时 3D | 探索、旋转、比较、响应用户输入    | 模型和代码体积、GPU 负载、无障碍工作、浏览器测试 |
| 视频                       | 每次都以同样的方式呈现一段序列或氛围 | 文件大小、自动播放规则、字幕、无法交互        |
| 图片或短动画                   | 快速解释一件事            | 不那么令人难忘；无法探索               |

[WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) 可以在所有现代浏览器中运行。[WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) 更新，在某些工作上更快，但支持情况仍不一致，所以要规划降级方案。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 时也能使用；键盘旋转、可见焦点和减少动态效果都是随每个功能一起构建的。它的[无障碍页面](https://janus-observatory.nicocerond.workers.dev/accessibility)列出了各项控件、非视觉替代内容和已知的局限。目标是 [WCAG 2.2](https://www.w3.org/TR/WCAG22/) AA 级，并通过在 Chromium、Firefox 和 WebKit 中运行的自动化测试进行检查。

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

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

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

## 成本如何

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

## Dardo 如何构建 3D 网站

我们通过[交互式 3D 网站](https://dardo.studio/zh-Hans/services/interactive-3d-websites/)服务设计和构建 3D 体验，并通过[创意开发](https://dardo.studio/zh-Hans/services/creative-development/)服务完成较轻量的动效和滚动交互。我们为 [Hyper](https://dardo.studio/zh-Hans/work/hyper/) 使用 React Three Fiber 打造了一个滚动驱动的 3D 故事，把零散的信号整合成一个完整的客户画像。如果你有一个需要空间才能被理解的想法，[告诉我们](https://dardo.studio/zh-Hans/contact/?service=interactive-3d-websites)。

## 常见问题

**3D 网站会影响 SEO 吗？**

只要内容在 HTML 中就不会。搜索引擎读取的是文字、链接和结构化数据，而不是画布里绘制的内容，所以要把名称、描述和数据放在页面中，用 3D 场景来增强它们。

**3D 网站能在手机上正常运行吗？**

可以，前提是为模型大小和 JavaScript 设定预算、限制像素比，并在真实的中端手机上测试。始终提供一个无需 WebGL 也能使用的版本。

**应该用 WebGL 还是 WebGPU？**

WebGL 可以在所有现代浏览器中运行。WebGPU 更新，可能更快，但支持情况仍不一致，所以如果使用它，请像 dardo.studio 首页那样规划 WebGL 降级方案。

**3D 网站可以做到无障碍吗？**

可以，前提是随每个功能一起构建无障碍支持：键盘控制、可见焦点、减少动态效果，以及每个画布旁边的文字替代内容。Janus Observatory 的目标是 WCAG 2.2 AA 级。

## 资料来源与延伸阅读

本页内容的资料来源，并附有原出版方提供的更多详情。

- [Janus Observatory：无障碍说明](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev
- [MDN：WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org
- [MDN：WebGPU API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org
- [MDN：DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org
- [MDN：prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org
- [Khronos Group：glTF](https://www.khronos.org/gltf/) · khronos.org
- [meshoptimizer](https://meshoptimizer.org/) · meshoptimizer.org
- [W3C：Web 内容无障碍指南（WCAG）2.2](https://www.w3.org/TR/WCAG22/) · w3.org
- [web.dev：Web Vitals](https://web.dev/articles/vitals) · web.dev

[Nicolás Cerón](https://dardo.studio/zh-Hans/studio/)

Nicolás Cerón是Dardo的创始人,Dardo是一家位于哥伦比亚波哥大的品牌、网页设计与开发工作室。

## 相关文章

- [**哥伦比亚网站建设费用（2026）：真实价格与影响报价的因素**哥伦比亚网站建设费用怎么算：波哥大服务商注明日期的公开价格、域名和托管的固定年费，以及真正影响报价的因素。](https://dardo.studio/zh-Hans/blog/website-cost-colombia/)
- [**Framer 迁移到 Astro：如何迁移 Framer 网站，同时保住设计和排名**Framer 不提供 HTML 导出，所以迁移到 Astro 只能重建。先采集什么、哪些会失效，以及如何保住设计、URL 和排名。](https://dardo.studio/zh-Hans/blog/framer-to-astro/)
- [**Webflow 迁移到 Astro：如何迁移 Webflow 网站，同时保住内容、设计和排名**Webflow 迁移到 Astro 之前要知道：代码导出不含 CMS、表单、搜索和多语言页面。哪些要从 Webflow 导出、哪些要在 Astro 中重建，以及如何保住排名。](https://dardo.studio/zh-Hans/blog/webflow-to-astro/)
- [**WordPress 迁移到 Astro：如何迁移 WordPress 网站，无头方式或彻底迁出，同时保住排名**WordPress 迁移到 Astro 的两种方式：要导出什么，如何保住 Yoast 标题、固定链接和上传的图片，以及大多数迁移都会遗漏的 WordPress URL。](https://dardo.studio/zh-Hans/blog/wordpress-to-astro/)

## 继续探索。

- [服务 · **基于 Three.js 和 WebGL 的交互式 3D 网站**](https://dardo.studio/zh-Hans/services/interactive-3d-websites/)

- [你的项目 · **开始沟通**](https://dardo.studio/zh-Hans/contact/)