DeskForge
為3C電子商店打造的3D桌面配置器:顧客在自己真實的桌子上打造工作空間,並把整套商品加入購物車。


挑戰
在網路上購買螢幕、支架與桌子的人無法確定所有東西是否放得下、能否搭配使用,於是猶豫不決、一次只買一件,或把不合適的商品退貨。
方案
- 3D配置器: 逼真的場景,採用物理基礎材質、柔和陰影與環境光遮蔽、圓角、依真實配列建模的鍵盤、真實的商品顏色、來自Blender與GLB檔案的模型、RGB燈光、霧面或亮面螢幕;透過合併網格控制算繪預算,並為手機提供畫質模式。
- 桌子與房間: 參數化桌子(直線型、有缺口、L型)、桌子在房間中的位置、家具、窗戶、裝飾品,以及六種室內預設組合。
- 規則引擎: 檢查擺放、人體工學與安裝相容性(VESA、承重、夾具),提供警告與一鍵修正;支援一到三台螢幕的配置;支架與底座;尺寸模式。
- 商品目錄與銷售: 附管理介面、匯入功能與OpenAPI的商品目錄API;14個類別中附照片的38件真實示範商品;規格、折扣與缺貨狀態;相容商品推薦與「還缺什麼」提示;一鍵把整套配置加入購物車。
- 嵌入商店: gzip壓縮後不到10 KB的載入器指令碼,採用frame-ancestors CSP的嵌入模式與示範商店,以及商品頁用的精簡小工具。
- 配置管理: 透過短連結儲存、命名、「My setups」、附Open Graph預覽的分享頁面、匯出為PNG與PDF;復原與重做。
- 數據分析: 事件規劃、資料收集與漏斗,在取得同意後轉送到GA4與Meta Pixel,訂單歸因與平均訂單金額。
- 資安: 不以root身分執行的容器、請求本文大小限制、支援IPv6的速率限制,以及允許嵌入的來源清單。
- 架構: 11份架構決策記錄,其中包括選定算繪引擎前進行的效能評比。
成果
配置器、商品目錄、嵌入與數據分析功能已經完成並有測試涵蓋;Shopify是規劃中的第一個商店串接。實測結果:60張商品照片製成縮圖後從18.8 MB降到124.5 KB;延遲載入的嵌入框架讓LCP減少35–40 ms;室內預設組合切換耗時不到135 ms。