最近社群被一個網站洗版：它用真正的 glTF 3D 模型，搭配 three.js 和 GSAP，做出一把會旋轉的劍——而且劍面反射的，竟然像是一段放映機投影的影片，連光影流動都做出來了。大家驚呼「這也太強了吧」。但在一片讚嘆聲中，也有設計師冷靜地問了一句：「然後呢？這把劍，幫使用者解決了什麼問題？」
這正是 2026 年沉浸式 3D 最值得思考的張力。Figma 的設計趨勢盤點、studiomeyer 的年度預測，全都把 three.js／WebGL／WebGPU 列為今年的「標配」。沉浸式 3D 不再是少數實驗網站的玩具，而是主流設計語言的一部分。但越是普及，「意圖大於炫技」這句話就越重要。
今天你會學到：什麼是 WebGL 和 three.js、2026 沉浸式 3D 的趨勢方向、為什麼「意圖」比「炫技」更關鍵、什麼時候該用什麼時候不該用，以及常被忽略的效能與無障礙考量。
📖 學（核心）
先從底層說起。WebGL 是瀏覽器內建的一套繪圖技術，讓網頁能直接呼叫你電腦或手機的顯示卡（GPU），畫出即時的 3D 畫面。沒有它，瀏覽器只能畫平面的圖片和文字。但 WebGL 本身非常底層、非常難寫——你得親手處理矩陣運算、頂點、著色器，光是畫出一個會轉的方塊就要寫上百行程式碼。它像是給你一塊裸露的引擎，威力強大，但不適合直接上手。
這就是 three.js 登場的地方。它把 WebGL 包裝成好理解的概念：場景（scene）、相機（camera）、燈光（light）、物件（mesh）。你不再需要懂底層數學，只要說「放一顆球、打一盞燈、把相機擺這裡」，畫面就出來了。如果你熟悉前端，可以把 three.js 想成「3D 世界裡的 jQuery」——它不是發明新魔法，而是把原本難用的東西，變得人人都能上手。
2026 年的趨勢，是這股力量正式走進主流。過去 3D 網頁載入慢、吃資源，只有大品牌玩得起。但隨著 WebGPU（WebGL 的新一代繼任者，效能更好、更貼近現代顯示卡架構）逐漸成熟，加上裝置效能提升，沉浸式 3D 開始出現在產品展示、互動導覽、品牌首頁裡。Figma 的趨勢資源庫直接把它點名為今年的設計方向之一。
但這裡有個關鍵分水嶺：意圖大於炫技。回到那把會反射影片的劍——技術上嘆為觀止，但如果它只是讓人「哇」一聲就滑走，那它就只是煙火。真正好的 3D，是拿來解決「理解」與「導覽」的問題：讓你能 360 度旋轉一雙球鞋看清楚鞋底紋路，讓你在買家具前先把沙發「擺進」自己客廳，讓複雜的產品結構能被拆解、被看懂。3D 是手段，理解才是目的。當你問「拿掉這個 3D，使用者會損失什麼？」如果答案是「什麼都不會」，那它大概就是炫技。
最後，別忘了兩件常被熱情沖昏頭的事。第一是效能：3D 模型檔案大、運算重，在高階電腦上絲滑的體驗，到了三年前的中階手機上可能變成讀條地獄、風扇狂轉、電池暴跌。第二是無障礙：不是每個使用者都看得到、或想看動畫——有前庭功能障礙的人會因為大量動態而暈眩，也有人單純頻寬不足。好的做法是尊重使用者的系統設定（例如「減少動態效果」偏好），並確保拿掉 3D 之後，核心資訊與功能依然完整可用。
🧠 記
- WebGL 是引擎，three.js 是方向盤：底層繪圖很難，three.js 讓它好上手，像 3D 版的 jQuery。
- 2026 是沉浸式 3D 的主流元年：WebGPU 成熟 + 裝置變強，3D 從炫技變標配。
- 意圖大於炫技：先問「這 3D 解決了什麼理解或導覽問題」，答不出來就是煙火。
- 拿掉測試法：拿掉 3D 若什麼都不損失，它就不該存在。
- 快與善並重：顧效能（手機、載入），也顧無障礙（暈眩、頻寬、減少動態偏好）。
✍️ 實踐
今天的練習（擇一，約 20 分鐘）：
A. 找一個用了 3D 或大量動態效果的網站（可以就是那把劍，或任何你最近看到的）。寫下三句話：（1）它的 3D「為了解決什麼理解或導覽問題」；（2）如果完全拿掉這個 3D，使用者會損失什麼；（3）你的判斷——這是「意圖」還是「炫技」，為什麼。
B. 到 threejs.org 點開官方範例（examples），挑一個你看得懂的，寫下：這個範例「示範了什麼能力」（例如材質反射、相機運鏡、模型載入），以及它可以被用在什麼真實場景。
完成標準：你寫出了至少 3 句具體觀察，而且其中明確包含「這個 3D 服務了什麼目的」的判斷。能說出「為了什麼」，你就抓到核心了。
🔗 延伸學習
- Web Design Trends（Figma 資源庫）
- 用 Three.js 來當個創世神：Three.js 簡介（iThome 鐵人賽）
- Three.js 官方網站與範例
- 2026 網頁設計趨勢（studiomeyer）
💬 想深入？複製下面這段到 AI（ChatGPT、Claude…），再打上你的問題
你是我的「UIUX設計」學習教練。我今天在學的主題是「沉浸式 3D 與 WebGL／three.js」，重點包括：WebGL 是瀏覽器 3D 的底層而 three.js 讓它好上手、2026 沉浸式 3D 走向主流、核心原則是意圖大於炫技（3D 要服務理解與導覽）、要兼顧效能與無障礙。請用淺白、可操作的方式回答我接下來的問題，需要時給例子和步驟。我的問題是：
↑ 複製整段貼到 AI，最後接上你的問題即可。