---
title: "3D 網站：何時值得做？如何保持快速 — Dardo"
description: "3D 網站何時值得做、3D 與影片和圖片怎麼選，以及我們讓 Janus Observatory 的十個 3D 世界保持快速、沒有 WebGL 也好用的經驗。"
url: "https://dardo.studio/zh-Hant/blog/3d-websites/"
language: "zh-Hant"
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-Hans":"https://dardo.studio/zh-Hans/blog/3d-websites/"}
updated: "2026-10-13T01:02:31.180Z"
---

[部落格](https://dardo.studio/zh-Hant/blog/)

# 3D 網站：什麼時候值得做，以及如何維持載入速度

3D 網站什麼時候值得做、什麼時候影片或圖片更合適，以及我們如何讓 Janus Observatory 的十個 3D 世界保持快速、無障礙又好用。

作者： [Nicolás Cerón](https://dardo.studio/zh-Hant/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 的情況下也能運作，並把 3D 當作加分的強化效果。

本指南取材自我們自己的兩個專案：[Janus Observatory](https://dardo.studio/zh-Hant/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 章的故事、一本地圖集與一座天文台，其中包含十個原創的低多邊形（low-poly）世界，以及一位關節可動的外星天文學家。它運行在 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 技術堆疊中的一個預測性預先擷取（prefetch）迴圈，在一次失敗的瀏覽器追蹤中發出了 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-Hant/blog/website-cost-colombia/)指南所說明的成本因素中，也就是「客製化動態效果、3D 或互動式資料」這一項。

## Dardo 如何打造 3D 網站

我們透過[互動式 3D 網站](https://dardo.studio/zh-Hant/services/interactive-3d-websites/)服務設計並建置 3D 體驗，較輕量的動態與捲動效果則透過[創意開發](https://dardo.studio/zh-Hant/services/creative-development/)服務處理。我們為 [Hyper](https://dardo.studio/zh-Hant/work/hyper/) 以 React Three Fiber 打造了一個捲動驅動的 3D 故事，將零散的訊號整合成單一的顧客輪廓。如果你有一個需要空間才能被理解的構想，[歡迎告訴我們](https://dardo.studio/zh-Hant/contact/?service=interactive-3d-websites)。

## 常見問題

**3D 網站會影響 SEO 嗎？**

只要內容存在於 HTML 中就不會。搜尋引擎讀取的是文字、連結與結構化資料，而不是畫布中繪製的內容，所以請把名稱、描述與資料放在頁面中，再用 3D 場景加以強化。

**3D 網站在手機上能正常運作嗎？**

可以，前提是為模型大小與 JavaScript 設定預算、限制像素比，並在真實的中階手機上測試。也一定要提供不需要 WebGL 就能運作的版本。

**應該使用 WebGL 還是 WebGPU？**

WebGL 可在所有現代瀏覽器中執行。WebGPU 較新，速度可能更快，但支援程度仍不一致，所以如果要使用它，請規劃 WebGL 替代方案，就像 dardo.studio 首頁的做法一樣。

**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：網頁內容無障礙指引（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-Hant/studio/)

Nicolás Cerón 是 Dardo 的創辦人。Dardo 是一間位於哥倫比亞波哥大的品牌、網頁設計與開發工作室。

## 相關文章

- [**哥倫比亞網站製作費用：2026 年做網站要多少錢？實際價格與影響報價的因素**哥倫比亞網站製作費用整理：波哥大業者公開且註明日期的價格、網域與主機每年的固定費用，以及真正會影響網站報價的因素。](https://dardo.studio/zh-Hant/blog/website-cost-colombia/)
- [**Framer 轉 Astro：如何遷移 Framer 網站，同時保住設計與排名**Framer 沒有 HTML 匯出功能，所以改用 Astro 等於重建網站。本文說明該先擷取什麼、哪些地方會出問題，以及如何保住設計、網址與排名。](https://dardo.studio/zh-Hant/blog/framer-to-astro/)
- [**Webflow 轉 Astro：如何遷移 Webflow 網站，同時保住內容、設計與排名**Webflow 轉 Astro 之前要知道：程式碼匯出不含 CMS、表單、搜尋與多語系頁面。本文說明該從 Webflow 匯出什麼、在 Astro 重建什麼，以及如何保住排名。](https://dardo.studio/zh-Hant/blog/webflow-to-astro/)
- [**WordPress 轉 Astro：如何遷移 WordPress 網站，採用 headless 或完全搬離，同時保住排名**WordPress 轉 Astro 的兩種做法：該匯出什麼、如何保住 Yoast 標題、永久連結與上傳的圖片，以及多數遷移都會遺漏的 WordPress 網址。](https://dardo.studio/zh-Hant/blog/wordpress-to-astro/)

## 繼續探索。

- [服務 · **使用 Three.js 與 WebGL 打造互動式 3D 網站**](https://dardo.studio/zh-Hant/services/interactive-3d-websites/)

- [您的專案 · **開始聊聊**](https://dardo.studio/zh-Hant/contact/)