POC 開發規劃 — 2026 年 4 月 ~ 6 月
| 任務項目 | 時數 (hr) | 成本 (NTD) | 佔比 | 風險等級 |
|---|---|---|---|---|
| UI/UX 設計（前後台 Wireframe + 基本視覺） | 25 | $6,250 | 12.5% | 低 |
| 後端建構（API / DB / 部署） | 20 | $5,000 | 10.0% | 低 |
| 前台 Mode 1 — AR 辨識 + 材質替換 | 50 | $12,500 | 25.0% | 高 |
| 前台 Mode 2 — 3D Orbit 瀏覽器 | 25 | $6,250 | 12.5% | 中 |
| 後台 Mode 1 — 管理介面（瀏覽 + 資料管理） | 20 | $5,000 | 10.0% | 低 |
| 後台 Mode 2 — 位置編輯器（拖曳 / 座標調整） | 30 | $7,500 | 15.0% | 中 |
| 測試 & 整合（實機測試、跨瀏覽器、E2E） | 20 | $5,000 | 10.0% | 低 |
| 緩衝 / 突發修正 | 10 | $2,500 | 5.0% | — |
| 合計 | 200 | $50,000 | 100% |
| 套件 | 圖像追蹤 | 多目標支援 | 效能 | Three.js 整合 | 動態載入目標 | 費用 | 維護狀態 |
|---|---|---|---|---|---|---|---|
| MindAR.js ★ 推薦 |
優秀 NFT 自然特徵追蹤，辨識精度高 |
支援 可同時追蹤多個目標 |
中上 WASM 加速，手機表現穩定 |
原生支援 內建 Three.js 模式 |
支援 可動態新增/移除追蹤目標 |
免費 MIT License |
活躍 持續更新中 |
| AR.js | 普通 NFT 模式辨識較慢 |
有限 多目標效能下降明顯 |
中等 Marker 模式快，NFT 模式較慢 |
間接 主要依賴 A-Frame，Three.js 需額外處理 |
不支援 需重新初始化 |
免費 MIT License |
緩慢 更新頻率低 |
| 8th Wall | 頂級 業界最強圖像追蹤 |
優秀 原生多目標支援 |
最佳 深度優化的 SLAM |
原生支援 Three.js / A-Frame / Babylon |
支援 完整 API |
付費 ~$99/月起，超量另計 |
活躍 Niantic 維護 |
| WebXR API 瀏覽器原生 |
不支援 無圖像追蹤功能 |
N/A | 最佳 原生效能 |
原生支援 Three.js WebXRManager |
N/A | 免費 瀏覽器內建 |
發展中 iOS Safari 支援不完整 |
| Zappar | 優秀 精度高，速度快 |
支援 多目標追蹤 |
優秀 WASM 深度優化 |
原生支援 @zappar/zappar-threejs |
有限 需預編譯目標檔 |
付費 免費額度有限，商用需付費 |
活躍 穩定維護 |
┌─────────────────────────────────────────────────────────────────────┐ │ 使用者裝置（手機） │ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ 前台 Mode 1 (AR) │ │ 前台 Mode 2 (3D) │ │ │ │ │ │ │ │ │ │ Camera → MindAR │ │ Three.js Scene │ │ │ │ → Three.js Overlay │ │ + OrbitControls │ │ │ └────────┬────────────┘ └────────┬────────────┘ │ │ │ │ │ └────────────┼───────────────────────────┼────────────────────────────┘ │ REST API │ ▼ ▼ ┌─────────────────────────────────────────────────────────────────────┐ │ Next.js Server (Bun Runtime) │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │ │ │ API Routes │ │ Drizzle ORM │ │ Static Assets │ │ │ │ /api/* │──▶│ │──▶│ /public/models │ │ │ └──────────────┘ └──────┬───────┘ └──────────────────┘ │ │ │ │ │ ┌───────▼───────┐ │ │ │ SQLite (Turso) │ │ │ │ 品項資料 │ │ │ │ 位置座標 │ │ │ │ 材質設定 │ │ │ └───────────────┘ │ └─────────────────────────────────────────────────────────────────────┘ ▲ ▲ │ REST API │ ┌────────────┼───────────────────────────┼────────────────────────────┐ │ │ │ │ │ ┌────────┴────────────┐ ┌────────┴────────────┐ │ │ │ 後台 Mode 1 (管理) │ │ 後台 Mode 2 (編輯) │ │ │ │ │ │ │ │ │ │ CRUD 列表 │ │ 3D Scene Editor │ │ │ │ 素材上傳 │ │ TransformControls │ │ │ │ 3D 預覽 │ │ 座標面板 │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ 藝術家（電腦） │ └─────────────────────────────────────────────────────────────────────┘