教學課程：使用 Babylon.js 在 WebXR 中建置Babylon.js

發行項
07/12/2023

在真實世界中建置一個生氣，需要時間、技能和材料。如何為 VR/AR 世界建置一個？

在本教學課程系列中，您將瞭解如何使用Babylon.js來建立一個Mixed Reality Web 應用程式，其中包含虛擬世界中運作的 88 鍵獨立月臺。在完成的應用程式中，您將能夠使用混合實境控制器，將電話傳送至電匯並播放金鑰。

在本教學課程系列中，您將瞭解如何：

建立、定位和合併網格以建置鍵盤
匯入獨立式框架的Babylon.js模型
將指標互動新增至每個輸入鍵
在 WebXR 中啟用遠端移植和多點支援

必要條件

連線到網際網路的電腦
基本 JAVAscript 知識
WebXR JAVAscript Hello World教學課程
WebXR 支援的瀏覽器，例如 Microsoft Edge
Babylon.js 4.2 或更高版本
任何VR 頭戴式裝置或Windows Mixed Reality模擬器
選擇性：如果您想要使用Windows Mixed Reality模擬器，請Windows 10 Creator Update

開始使用

讓我們從設定將包含Babylon.js場景的 HTML 網頁開始。

建立名為babylonjs-Visual Studio Code-tutorial 的資料夾，並在 Visual Studio Code中開啟資料夾。

注意

雖然您可以使用任何程式碼編輯器來跟著進行，但我們在本教學課程中將會使用Visual Studio Code，方便使用。

在資料夾中，建立名為index.html的檔案，並將下列範本插入檔案中：

<html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas"); 
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

如果您需要此範本內容的詳細資訊，請參閱Hello World教學課程，這是本教學課程的必要條件。

如果您嘗試在瀏覽器中開啟此檔案，主控台會顯示錯誤，指出找不到函 createScene() 式。讓我們在下一節中實作函 createScene() 式來解決此錯誤。

設定場景

在與 index.html相同的資料夾中，建立名為 scene.js的另一個檔案。我們將儲存所有與設定場景相關的 javascript 程式碼，並在此檔案中建立此檔案中的快取。
讓我們將函 createScene() 式新增至 scene.js：
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);
    return scene;
}
```
請注意，我們正在建立 createScene() 非同步函式。請隨時瞭解原因。
接下來，我們需要光線和相機，讓我們能夠看見場景。更新函式 createScene() ：
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;

    return scene;
}
```
在這裡，我們已建立 ArcRotateCamera，這幾乎完全向下指向，並以空間的原點為目標。我們建立的光線是指向空的十六進位Light ，可用於模擬環境空間。我們也將光線變暗一點，方法是降低其濃度。

如果您需要如何建立相機和光線的重新整理程式，請先重新流覽Hello World教學課程系列的準備場景一節，再繼續進行下一個步驟。
最後，因為我們正在開發 WebXR 平臺，因此必須在之前 return scene; 插入下列這一行，在場景中啟用 XR 體驗：
```
const xrHelper = await scene.createDefaultXRExperienceAsync();
```
在 javascript 中，為了在 await 函式內的函式上使用 async 關鍵字，父函式也必須是 async ，這就是為什麼我們稍早將函式定義為 createScene 非同步原因。稍後在本教學課程系列中，我們將使用此 xrHelper 系列來啟用及設定Babylon.js支援的不同 WebXR 功能。

已完成 的scene.js 看起來應該像這樣：

const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    return scene;
}

既然我們有一個正常運作 createScene() 的函式， 讓我們index.html將 scene.js 檔案載入為腳本，以便在 createScene()index.html中辨識函式。在 html 檔案的區段中新增這行程式碼 <header> ：

<html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="scene.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas");
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

在瀏覽器中開啟 index.html ，您會發現我們稍早看到的錯誤訊息已不存在，而且頁面有空的Babylon.js場景。

下一步

下一個教學課程：建置 3D 儲存模型

教學課程：使用 Babylon.js 在 WebXR 中建置Babylon.js

必要條件

開始使用

設定場景

下一步

其他資源