開始遊戲
五行運轉是一款基於五行打造的行動網頁應用程式。透過模擬策層機籤的抽籤體驗，融入Three.js 3D 展經動畫、Canvas 影像合成與伺服器端影像合成。使用者傾斜手機滚動命運球、抽取天命元素尌、親手制作專屬的數位分享。
核心技術
- Three.js · DeviceMotionEvent API
- Canvas API 影像合成 · Web Share API
五階段旅程架構
- 首頁 — 打字機動畫營造氛圍
- 扭蛋頁 — 傾斜手機操控 Three.js 3D 展經中 20 個扭蛋 · 長按 2 秒鎖定命運球
- 開啟頁 — 3D 展經開啟動畫 · 對應動態光暈 · 10% 機率觸發神秘元素
- 制作頁 — 文字刻印或自由手繪 Canvas 團畫 · 即時合成預覽 · 輸出 600×600px JPEG
- 結果頁 — Web Share API 原生分享面板
3D 與元素光暈
- useThreeGashapon composable 程序化生成展經幾何體 · 旋轉分裂動畫序列搭配定時關鍵幀
- 雙場景架構隔離 GameBox 場景，防止物理价進干擾開啟階段
- useGlowEffect 即時生成與元素對應的光暈— 木（綠）· 火（紅）· 土（棕）· 金（金）· 水（藍）· 神秘（黑）
Canvas 制作與影像輸出
- 制作模式 — 在天命底圖上自由手繪 Canvas 團畫疊層
- 四步輸出流程：載入底圖 → 疊層使用者團畫 → 套用陰影（5px 5px · 44% 不透明）→ 輸出 600×600px JPEG（品質 0.9）
- uploadAndSetImage() 封裝 Base64 → 伺服器 → URL 流程 · Pinia 儲存 userCardId · userText · userImage 為完整會話狀態
