[Web 3D] 探索 Web 3D 電商：從 2D 商品列表到 3D 互動虛擬商場的開發紀錄

打破網頁電商「圖文＋格子」的傳統框框

過去二十年來，線上購物的模式幾乎沒有太大的改變：打開網頁、看著兩欄或四欄的商品縮圖、點進去滑幾張照片、看看文字規格，然後加入購物車。

但如果「逛網頁」能像「逛實體快閃店」一樣具備空間感與探索樂趣呢？這篇文章將記錄我運用 Three.js 與 WebGL 打造的 3D 虛擬商場原型專案《Galactic Station》，紀錄我如何將傳統 2D 商品列表，轉化為 3D 互動空間的 MVP（最小可行性產品）測試過程。

一、 原型開發（MVP）：目前已實現的核心功能

在這個初期的原型版本中，我主要專注於驗證「網頁端 3D 空間漫遊與基礎互動」的可行性：

1. 網頁端 3D 空間載入：直接在瀏覽器中渲染 3D 虛擬展館，訪客無須安裝額外外掛即可進入。
2. 基礎視角與空間漫遊：提供鍵盤與滑鼠（或手機觸控）操控，讓訪客可以在 3D 場景內自由移動、穿梭於不同展區。
3. 3D 物件互動與導向：點擊場景中的指定 3D 商品模型，可直接觸發互動或跳轉至相對應的商品詳細資訊。

二、 實測檢討：從第一版原型發現的改進空間

在實際測試這個 MVP 原型後，我也觀察到了幾個非常值得在下一階段優化的瓶頸：

• 載入效能與模型體積：未經過極致壓縮的模型檔案較大，在網路狀況較差的手機裝置上，首次載入時間仍有進步空間。
• 操作體驗的順暢度：手機端的觸控漫遊比起電腦端的滑鼠控制更加複雜，需要針對 Mobile 端的 UI/UX 進行更多降級適應（Graceful Degradation）。

三、 未來技術迭代路線（Roadmap）

針對上述發現的瓶頸，這套 3D 商場系統預計在後續版本中導入以下優化策略：

• 🚀 模型極致輕量化：導入 Draco 幾何壓縮技術與紋理貼圖烘焙（Baking），將 3D 模型體積進一步削減 60% 以上，實現秒級開啟。
• 🎯 動態熱點（Hotspots）與 UI 結合：設計靠近模型時自動浮現的標籤，讓訪客不用點擊就能直觀看到商品價格與規格卡片。
• 🧭 雙模態導覽機制：針對趕時間的顧客，加入「2D 快選目錄 $\leftrightarrow$ 3D 視角瞬間飛躍」的切換按鈕，兼顧沉浸感與購物效率。

💡 創作者結語與交流

打造一個產品的過程，本來就是從 MVP（最小可行性產品）開始不斷實驗與迭代。這座 3D 虛擬商場原型雖然還有許多可以優化的空間，但已經成功驗證了「3D 互動電商」的無限可能性。

如果你對 Web 3D 網頁開發、原型驗證，或是如何把創新科技運用在自媒體與商業展示 感興趣：

👉 [點此加我的 Official LINE]，一起交流更多關於 3D 網頁與自媒體落地的實戰經驗！