挑戰
智慧門鎖搭配 App，功能包含遠端開門、一次性密碼、房客管理、收租對帳與報修。
只看規格表和截圖，看不出鎖與 App 怎麼連動。
我曾負責智慧門鎖品牌的行銷，這個作品把鎖與 App 的情境，放進同一個畫面。
做法
- 3D 門鎖：用 Three.js 做出裝在門上的智慧門鎖，可旋轉與縮放，有日夜模式。
- 6 個觀看角度：全景、主視角、正面、側視、鍵盤、指紋。
- 5 個發光熱點：狀態燈、密碼面板、指紋、把手、鎖芯，點了會跳出說明。
- 鎖與 App 連動：在 3D 門鎖上輸入密碼、模擬指紋、按壓把手，手機畫面會同步變化。
- 12 項 App 功能：遠端開門、一次性密碼、臨時訪客、權限管理、開門紀錄、異常警示、房客管理、電子簽約、線上收租、自動對帳、財務報表、報修管理，分成門鎖、租務、帳務、維運四組。
- 7 步導覽：第一次開啟時，用蒙層逐步介紹門鎖與 App。
- 示範資料：房客、金額與聯絡資料都是示範用。
成果
完成 3D 互動首頁：12 項 App 功能、5 個門鎖熱點、7 步導覽。
頁面放在這個網站，可在本頁操作，也能全螢幕或用新分頁開啟。
3D 場景需要 WebGL 與網路連線（載入 Three.js）；不支援時，3D 區會顯示說明，App 畫面仍可操作。
同類型的工作，另見案例AI 體驗中心。