Självstudie: Skapa ett piano i WebXR med Babylon.js

  • Artikel

Att bygga ett piano i den verkliga världen kräver mycket i vägen för tid, färdigheter och material. Vad sägs om att bygga en för VR/AR-världen?

I den här självstudieserien får du lära dig hur du använder Babylon.js för att skapa en Mixed Reality webbapp som innehåller ett fungerande 88-nyckels standuppiano i den virtuella världen. I den färdiga appen kan du teleportera till pianot och spela upp nycklarna med hjälp av dina styrenheter för mixad verklighet.

I den här självstudieserien får du lära dig att:

  • Skapa, placera och sammanfoga nät för att skapa ett pianotangentbord
  • Importera en Babylon.js modell av en standuppianoram
  • Lägga till pekarinteraktioner till varje pianonyckel
  • Aktivera stöd för teleportering och multipointer i WebXR

Förutsättningar

Komma igång

Vi börjar med att konfigurera HTML-webbsidan som innehåller Babylon.js scen.

  1. Skapa en mapp med namnet babylonjs-piano-tutorial och öppna mappen i Visual Studio Code.

    Anteckning

    Du kan använda valfri kodredigerare för att följa med, men vi kommer att använda Visual Studio Code i den här självstudien för enkelhetens skull.

  2. I mappen skapar du en fil med namnet index.html och infogar mallen nedan i filen:

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

    Om du behöver mer förklaring av innehållet i den här mallen kan du läsa Hello World Självstudie, som är en förutsättning för den här självstudien.

  3. Om du försöker öppna den här filen i en webbläsare visas ett fel i konsolen som anger att createScene() funktionen inte hittas. Vi löser det här felet genom att implementera funktionen createScene() i nästa avsnitt.

Konfigurera scenen

  1. I samma mapp som index.htmlskapar du en annan fil med namnet scene.js. Vi lagrar all javascript-kod som är relaterad till att konfigurera scenen och skapa pianot i den här filen.

  2. Nu ska vi lägga till createScene() funktionen i scene.js:

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

    Observera att vi gör createScene() en asynkron funktion. Håll ögonen öppna för att ta reda på varför.

  3. Därefter behöver vi ett ljus och en kamera för att göra scenen synlig för oss. createScene() Uppdatera funktionen:

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

    Här har vi skapat en ArcRotateCamera, som pekar nästan helt nedåt och riktar in sig på utrymmets ursprungspunkt. Ljuset vi har skapat är ett hemisphericLight som pekar mot himlen och är användbart för att simulera ett omgivande utrymme. Vi har också dämpat ljuset lite genom att sänka dess intensitet.

    Om du behöver en uppdatering om hur du skapar en kamera och ett ljus kan du gå tillbaka till avsnittet Förbered scen i Hello World-självstudieserien innan du fortsätter till nästa steg.

  4. Eftersom vi utvecklar för en WebXR-plattform måste vi slutligen aktivera XR-upplevelsen i scenen genom att infoga följande rad före return scene;:

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    För att kunna använda nyckelordet await i en async funktion i en funktion i javascript måste den överordnade funktionen också vara async, vilket är anledningen till att vi definierade createScene funktionen som asynkron tidigare. Senare i den här självstudieserien använder vi detta xrHelper för att aktivera och konfigurera olika WebXR-funktioner som stöds av Babylon.js.

  5. Den slutförda scene.js bör se ut så här:

    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. Nu när vi har en fungerande createScene() funktion ska vi index.html läsa in scene.js-filen som ett skript så att createScene() funktionen identifieras i index.html. Lägg till den här kodraden i <header> avsnittet i html-filen:

    <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. Öppna index.html i webbläsaren så ser du att felmeddelandet som vi såg tidigare inte längre finns och att vi har en tom Babylon.js scen på sidan.

Nästa steg

Nästa självstudie: Skapa en 3D-pianomodell