一個互動式 3D 智能眼鏡產品體驗,將傳統靜態產品展示轉化成可探索的數碼 Demo。用戶可以自由旋轉眼鏡、點擊鏡片進入特寫視角,並啟動 AR 風格導航 HUD,提升產品展示的互動性與科技感。
此體驗結合 Three.js、GLB 智能眼鏡 3D 模型及自訂未來感介面,示範如何將沉浸式產品互動直接整合至網站或 Digital Campaign Landing Page。 用戶可以拖動查看眼鏡不同角度、點擊鏡片後平滑 Zoom 至預設焦點,並顯示貼附於鏡片上的導航 HUD。配合 Responsive Rendering、動態燈光、Dark Tech 視覺及輕量技術介面元素,營造更具質感的智能產品展示體驗。
- 精準鏡片互動定位透過 Three.js Raycasting 精準偵測指定鏡片,避免誤觸其他 3D 物件。
- 準確 Camera Zoom 及旋轉中心利用 zoom_center 控制 Camera Target 及旋轉中心,確保特寫構圖準確。
- 平滑 Focus 與 Exit Transition同步 Camera Position、Target 及 Quaternion,避免 Zoom 或返回時出現跳動。
- HUD 與 3D 鏡片整合將 HUD Plane 掛載至鏡片物件,確保旋轉時保持準確對位。 導航 HUD 透明化處理 — 透過 Canvas 將深色背景轉為透明,保留 Cyan HUD 元素及 Holographic 效果。
- Dark Style 產品燈光平衡配合多層 Studio Lighting 及 Tone Mapping,在深色背景中突出產品輪廓與材質。
- Responsive 互動式嵌入動態調整 Renderer、Camera 及 iframe,確保不同屏幕尺寸仍保持完整互動體驗。