Mix Reality Experiment with Three.js

我嘗試以Three.js建構一個符合展示需求(可重複執行、方便維護、方便布展)的混合實境系統架構。

這個架構的「主要互動/開發關鍵」包括:

1.使用MR Passthrough + Desktop/Quest 3 Preview VR ,在同一份程式裡運行,透過FileZilla傳輸到Public HTML,在透過Quest 3的Browser預覽和體驗。
2.觀者在Quest 3的Browser 可先透過左上角的HUB預覽3D模型Loading進度、右上角Preview VR內容。點擊下面下方的Start AR按鈕就可進入MR模式(圖一)。
3.可藉由Controller來Hit-test reticle 放置圓框與 waterRoot粒子特效(圖二);短按為放置;長按(>1000ms)可進入 reposition (重新放置)。放下Controller就可開始徒手互動(圖三)。
4. 觀者用手觸碰STL collider (珊瑚造型) 2秒鐘,會觸發 MR ↔ VR 切換(fade淡出 + teleport SFX音效)(見Youtube影片)
5.Quest-friendly loading gate:首次觸碰即背景預載 VR assets;切換到 VR 時先淡出到黑、保持黑畫面直到 VRScene + frog + fish 全部載入成功;若載入失敗則回到MR 並淡入。
進入到VR狀態時,也會同時觸發旁白語音呈現我想要的敘事,觀眾在探索之中聽故事。

圖一 左上角HUD預覽模型Loading狀況、右上角Preview VR、下方Start AR
圖二 使用者可以運用Controller在環境中定位Reticle,也就是虛擬珊瑚與粒子特效的中心點。
圖三 放下Controller,可以用手進行互動
透過用手碰觸實體珊瑚,觀者可以進入一段VR敘事,再碰觸就可以回到MR狀態

實際體驗與開發目標:

我想透過XR來深化《北海岸海廢考古》現成物雕塑的敘事深度。未來觀眾可以用手觸摸以海廢組成的發光珊瑚,進入到一段與海洋生態有關的VR情境,也可重複來回XR / VR體驗,在可碰觸、可自由探索的混合時竟體驗中,經歷一段後人類/人類世觀點的情境。這是與GPT協作的Three.js WebXR程式開發,會繼續探索WebXR結合雕塑與裝置的可能。

Experience Design and Development Goals:

I want to deepen the narrative depth of my ready-made sculpture series Marine Waste Archaeology on the North Coastthrough XR. In the future, audiences will be able to touch a glowing coral sculpture composed of marine debris and transition into a VR scenario related to ocean ecology. They can repeatedly move back and forth between XR and VR, as an embodied, tactile, and freely explorable mixed-reality experience—one that unfolds through a post-human / Anthropocene perspective.

This project is being developed through Three.js WebXR programming in collaboration with GPT, and I will continue to explore the possibilities of integrating WebXR with sculpture and installation-based art.