教學課程：使用 Babylon.js 建立您的第一個 WebXR 應用程式

發行項
07/12/2023

本教學課程將示範如何使用 Babylon.js 和 Visual Studio Code建立基本Mixed Reality應用程式。您要建置的應用程式會轉譯 Cube，讓您旋轉它，讓其他臉部成為檢視，並新增互動。在本教學課程中，您會了解如何：

設定開發環境
用來建立基本 3D 元素的Babylon.js API
建立新的網頁
與 3D 元素互動
在Windows Mixed Reality模擬器中執行應用程式

必要條件

WebXR 支援的瀏覽器，例如 Microsoft Edge
Babylon.js 4.2 或更高版本
NodeJS
選擇性：如果您想要使用Windows Mixed Reality模擬器，請Windows 10 Creator Update
選擇性：Windows Mixed Reality模擬器

開始使用

若要從頭開始建立此專案，請從VISUAL STUDIO CODE (VSCode) 專案開始。

注意

使用 VSCode 並非必要專案，但我們會在整個教學課程中方便使用。更有經驗的 JavaScript 開發人員可以使用他們所選擇的任何其他編輯器，甚至是最簡單的記事本。

下載 Babylon.js單一檔案，或使用可在官方Babylon.js網站上找到的線上版本。您也可以從GitHub複製整個Babylon.js專案
建立空的檔案，並將其儲存為 html 頁面，例如index.html

建立基本的 html 標記，並參考 Babylon.js javascript 檔案。最後的程式碼如下所示：

<html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
    </head>
<body>
</body>
</html>

在本文中新增畫布 HTML 元素，以呈現Babylon.js的內容。請注意，畫布具有 id 屬性，可讓您稍後從 JavaScript 存取此 HTML 元素。

<html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

畫布會佔用整個網頁。這可完成我們的網頁。此時，網頁已就緒。您可以在任何瀏覽器中開啟它，並確定沒有顯示任何錯誤，但還沒有沈浸式體驗。

下一步

下一個教學課程：2. 準備場景