iT邦幫忙

2025 iThome 鐵人賽

DAY 17
0
Modern Web

WebXR未來新視界:Babylon.js打造Web的VR/AR/XR體驗系列 第 17

[Day17] 用網頁就能看Babylon.js的XR範例Demo - 傳送門

  • 分享至 

  • xImage
  •  

Babylon的官方Youtube帳號大約在一年前發布了這個用Babylon.js做出的傳送門:
https://youtu.be/wmZxBMHWQAs?si=RgHZ_v3G11Iky2qb&t=22

影片看起來很酷! 看他介紹也會接續的講解程式碼,但是我也像在本地端玩玩看這個Demo可以嗎?
可以的唷! 這個Demo他也有放在playground可以讓大家自己來玩玩看,有些心得分享給大家注意:

  1. 點進連結後的點擊畫面右下角眼鏡罩圖示就可以進入XR環境!
  2. 因為是WexXR,所以點開連結時必須要用的是有鏡頭的裝置才能看到右下角眼罩圖示,並開啟結合現實畫面。手機或平板都可以,頭戴顯示器也可以。請務必使用比較新版本的瀏覽器。
  3. 打開後進去請先看地板幾秒,一開始會出現淺藍色甜甜圈,點擊甜甜圈才會出現傳送門。如果一開始對著遠方看的話,傳送門回在太遠的地方生成喔。 
  4. 這個demo還沒有做頭戴顯示器的退出,會必須強制關機才能退出。
     
    https://ithelp.ithome.com.tw/upload/images/20250927/201039901ABsivt0nu.png 傳送門的playground在此

如果遇到錯誤 點開連結是看到這樣:

AR is not available in your system. Please make sure you use a supported device such as a Meta Quest 3 or a modern Android device and a supported browser like Chrome.
Make sure you have Google AR services installed and that you enabled the WebXR incubation flag under chrome://flags

請試試用瀏覽器或chrome開啟。通訊軟體的內建瀏覽器會不能打開。

https://ithelp.ithome.com.tw/upload/images/20250927/20103990NswfmWLmuu.jpg

我想要電腦就能直接看到XR

想要在網頁上開發的話,一定很多時候會需要用電腦開啟WebXR,想要在沒有鏡頭的電腦上暫時跑起來看看,我們就來用虛擬的環境吧!要做的是安裝下面這個chrome extension小工具:
Immersive Web Emulator

安裝後維持開啟再次點開剛剛的傳送門playground, 原本沒有的右下角眼鏡罩圖示就出現了!在這個情況下的開啟的畫面,會是一個彷彿在方格世界中,但一樣可以執行點擊等行為以及看到畫面:
https://ithelp.ithome.com.tw/upload/images/20250927/20103990Bpl3xvRuXR.png

除此之外,在開發人員工具中也會出現WebXR的選項,藉此來設定要模擬的裝置是哪一種、顯示器和控制器的位置、控制器的設定等,可以幫助開發並快速驗證的方式:
https://ithelp.ithome.com.tw/upload/images/20250927/20103990KQjR7LRCrH.png


上一篇
[Day16] 不同的光源和長出影子(Feature - 單元七)
系列文
WebXR未來新視界:Babylon.js打造Web的VR/AR/XR體驗17
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言