Oktatóanyag: Zongora készítése a WebXR-ben a Babylon.js használatával

  • Cikk

A zongora a való világban való létrehozásához sok időre, készségekre és anyagokra van szükség. Mi a helyzet azzal, ha a VR/AR világ számára építünk egyet?

Ebben az oktatóanyag-sorozatban megtudhatja, hogyan hozhat létre Mixed Reality webalkalmazást Babylon.js, amely egy működő, 88 billentyűs standup zongorát tartalmaz a virtuális világban. A kész alkalmazásban teleportálhat a zongorára, és lejátszhatja a billentyűket a vegyes valóság vezérlőivel.

Ebben az oktatóanyag-sorozatban a következőket sajátíthatja el:

  • Hálók létrehozása, elhelyezése és egyesítése zongorabillentyűzet létrehozásához
  • Standup zongorakeret Babylon.js modelljének importálása
  • Egérmutató-interakciók hozzáadása az egyes zongorabillentyűkhöz
  • Teleportálás és többpontos támogatás engedélyezése a WebXR-ben

Előfeltételek

Első lépések

Kezdjük azzal, hogy beállítjuk az Babylon.js jelenetet tartalmazó HTML-weblapot.

  1. Hozzon létre egy babylonjs-piano-tutorial nevű mappát, és nyissa meg a mappát a Visual Studio Code-ban.

    Megjegyzés

    Bár bármilyen kódszerkesztőt használhat a követéshez, ebben az oktatóanyagban a Visual Studio Code-ot fogjuk használni a kényelem érdekében.

  2. A mappában hozzon létre egy index.html nevű fájlt, és szúrja be az alábbi sablont a fájlba:

    <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>

    Ha további magyarázatra van szüksége a sablon tartalmával kapcsolatban, tekintse meg a "Helló világ!" alkalmazás oktatóanyagot, amely az oktatóanyag előfeltétele.

  3. Ha böngészőben próbálja megnyitni ezt a fájlt, a konzol hibaüzenetet jelenít meg, amely azt jelzi, hogy a createScene() függvény nem található. A következő szakaszban a függvény createScene() implementálásával oldjuk meg ezt a hibát.

A jelenet beállítása

  1. A index.htmlmappában hozzon létre egy másik fájlt scene.jsnéven. Ebben a fájlban tároljuk a jelenet beállításához és a zongora létrehozásához kapcsolódó összes JavaScript-kódot.

  2. Adja hozzá a függvényt a createScene()scene.js:

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

    Vegye figyelembe, hogy aszinkron függvényt készítünk createScene() . Maradjon hangolva, hogy megtudja, miért.

  3. Ezután szükségünk lesz egy fényre és egy kamerára, hogy a jelenet látható legyen számunkra. Frissítse a függvényt 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;
}

    Itt létrehoztunk egy ArcRotateCamera-t, amely szinte teljesen lefelé mutat, és a tér forráspontját célozza. A létrehozott fény egy félgömbfény , amely az égre mutat, és hasznos a környezeti tér szimulálásához. Egy kicsit halványítottuk is a fényt az intenzitásának csökkentésével.

    Ha frissítenie kell a kamera és a fény létrehozásának módját, tekintse meg újra a "Helló világ!" alkalmazás Oktatóanyag-sorozat Jelenet előkészítése szakaszát, mielőtt továbblép a következő lépésre.

  4. Végül, mivel egy WebXR-platformot fejlesztünk, engedélyezni kell az XR-élményt a jelenetben a következő sor beszúrásával:return scene;

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    A javascriptben ahhoz, hogy a await kulcsszót egy async függvényen belül használhassa, a szülőfüggvénynek is a -nek kell lennie async, ezért definiáltuk createScene korábban a függvényt aszinkronként. Az oktatóanyag-sorozat későbbi részében ezt xrHelper fogjuk használni a Babylon.js által támogatott különböző WebXR-funkciók engedélyezéséhez és konfigurálásához.

  5. A befejezett scene.js a következőképpen kell kinéznie:

    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;
}

  6. Most, hogy rendelkezünk egy működő createScene() függvénnyel, index.htmltöltsük be a scene.js fájlt szkriptként, hogy a createScene() függvény felismerhető legyen index.html. Adja hozzá ezt a kódsort a <header> HTML-fájl szakaszához:

    <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>

  7. Nyissa meg index.html a böngészőben, és azt fogja tapasztalni, hogy a korábban látott hibaüzenet már nem jelenik meg, és üres Babylon.js jelenet jelenik meg az oldalon.

Következő lépések

Következő oktatóanyag: 3D zongoramodell létrehozása