使用 JavaScript 進行 WebXR 開發

JavaScript 是世界各地最受歡迎的程式設計語言之一! 它是簡單、輕量且廣泛使用於網路上。 利用 JavaScript 和 Web 技能的強大功能,建立更吸引人的Mixed Reality體驗。

在網路上Mixed Reality應用程式

Mixed Reality功能可透過WebXR 在網路上取得。 您可以在相容的 WebXR) 瀏覽器中看到虛擬實境 (VR) 和擴增實 (境,而不需安裝任何其他軟體或外掛程式。 您可以將該相同的瀏覽器與實體裝置搭配使用,例如HoloLens 2。

WebXR 裝置 API適用于存取虛擬實境 (VR) 和擴增實境, (AR) 裝置,包括感應器和前端掛接顯示器。 Microsoft Edge 和 Chrome 版本 79 上提供 WebXR 裝置 API,而更新版本預設支援 WebXR。 您可以在 caniuse.com檢查 WebXR 的最新瀏覽器支援狀態。

注意

WebVR 已被取代,目前瀏覽器無法使用,因此不應該用於任何新的開發。 您必須將任何現有的 WebVR 實作轉送到 WebXR

WebXR 功能 可用性
WebXR 裝置 API (w3.org) Windows 桌面上的 Edge 81
Hololens 2 上的 Edge 91
WebXR 擴增實境模組 - 層級 1 (w3.org) Edge 91。 僅限 Hololens 2
WebXR 手部輸入模組 - 層級 1 (w3.org) Edge 93。 僅限 Hololens 2
WebXR 錨點模組 (immersive-web.github.io) Edge 93。 僅限 Hololens 2
WebXR 點擊測試模組 (immersive-web.github.io) Edge 93。 僅限 Hololens 2

檢視 WebXR

您可以使用新的 Microsoft EdgeFirefox Reality瀏覽器,在 Windows Mixed Reality 中檢視 WebXR 體驗。 若要測試瀏覽器是否支援 WebXR,您可以在瀏覽器中流覽至 WebXR 範例

我可以使用什麼來開發沉浸式 Web 體驗?

下列清單顯示 JavaScript 架構和 API,用於建置目前占市且廣泛接受並採用混合實境 JavaScript 開發人員的沉浸式體驗:

Framework 範例
Babylon.js

Babylon 是 JavaScript 3D 引擎,可讓您輕鬆地開發 3D 內容和沉浸式應用程式。 開始使用沉浸式應用程式之前,建議您先瞭解Babylon.js開發的基本概念。

- 瞭解如何使用 Babylon.js建置 3D 應用程式: 使用者入門
- 使用Babylon.js播放 3D 範例及其原始程式碼: 遊樂場
- 深入瞭解 WebXR
- 瞭解如何開始使用我們的教學課程:建立您的第一個「Hello World!」 應用程式
BabylonJS 標誌
A-Frame

框架是一種宣告式 JavaScript 架構,可讓您在網路上開始使用虛擬實境。 若要深入瞭解,請參閱 A-Frame 檔
A-Frame
Three.js

Three.js是建立沉浸式體驗的熱門 3D 程式庫。 深入瞭解 three.js探索範例
Three.js
WebGL

您可以使用 WebGL API 直接存取 WebXR 裝置 API。 WebGL (Web 圖形庫) 是 JavaScript API,可在任何相容的網頁瀏覽器中轉譯高效能的互動式 3D 和 2D 圖形,而不需使用外掛程式。
WebGL

另請參閱

後續步驟--教學課程