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

簡短回答

當主題本身具有空間性，或在其中移動探索能說明一張圖片說不清楚的事情時，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 章的故事、一本地圖集與一座天文台，其中包含十個原創的低多邊形（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 也能操作，而鍵盤旋轉、可見的焦點與減少動態效果，都是隨著每項功能一起打造的。它的無障礙頁面列出了各項控制方式、非視覺的對應內容，以及已知的限制。目標是 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 故事，將零散的訊號整合成單一的顧客輪廓。如果你有一個需要空間才能被理解的構想，歡迎告訴我們。