返回

Place Finder — 遊戲化地點探索及 AR 體驗

01 . 項目挑戰

Place Finder 將日常「搵地方」轉化成城市探索遊戲。用戶可以透過 GPS 發現附近 Spot、探索不同 3D 角色、完成實體地點任務,並利用 AR 及手機相機與真實環境互動。

Place Finder 是一個以手機體驗為核心的互動地點探索平台,目標是將數碼內容、實體地點及用戶探索行為連接到真實世界。 系統利用 MapLibre 建立簡化的 3D 城市地圖,並根據用戶 GPS 顯示附近 Spot。每個地點均可設定專屬的 3D 角色及任務。 用戶不再只是瀏覽餐廳、活動或景點列表,而是需要實際前往不同地點。到達 Spot 後,可以查看 3D 角色、啟動 AR Camera、將角色放置或顯示於真實環境中,再透過拍照完成任務。 整個項目亦以可重用 Campaign Platform 為方向設計,不同活動可透過資料設定更換地點、角色、分類、獎勵及任務機制,而毋須每次重新開發整套體驗。

  1. GPS Spot 精準定位
    確保 Spot 在縮放、移動、旋轉及 3D 地圖操作時仍保持準確定位。
  2. 建立簡潔而有遊戲感的 3D Map
    簡化地圖資訊,營造更清晰及遊戲化的探索體驗。
  3. 手機 3D 效能控制
    先顯示輕量 Spot 圖示,只在需要時載入完整 3D 模型。
  4. 不同手機的 AR 兼容性
    因應 Android 及 iOS 的支援差異,提供不同 AR 方案及 fallback。
  5. 3D UU 熊原地步行動畫
    移除 Root Motion,讓 UU 熊可以自然原地步行。
  6. 將地點探索轉化成任務體驗
    透過 3D、AR 及拍照,將實體到訪轉化成互動任務。
  7. Campaign 擴展及內容管理
    以可設定 Spot 資料支援不同 Campaign,毋須重新開發整個平台。

02 . 解決方案

項目以 Vue 3、MapLibre 及 Three.js 建立模組化 Mobile Web 體驗。GPS 負責連接用戶與附近 Spot,簡化後的 3D Map 則提供較接近遊戲的探索介面。 每個 Spot 均可以獨立設定 3D Model、任務內容、GPS 範圍及獎勵。 為平衡裝置兼容性、AR 沉浸感及手機效能,項目測試了多種方案,包括 QR Tracking、A-Frame Marker Tracking,以及純 Mobile Browser 的 Markerless 平面估算。 最終架構將地圖探索保持輕量化,只在用戶真正進入 Spot 時才載入完整 3D 角色及 AR 功能。 任務亦可以要求用戶完成 AR 拍照後才解鎖完成狀態,將普通的地點瀏覽轉化成可量度的實體到訪及互動行為。

Place Finder — 遊戲化地點探索及 AR 體驗 Demo

運行 HTML5互動示範

互動示範 已停止

按「開始示範」開始 Place Finder 互動體驗 手機裝置可使用AR 相機功能。