Zelfstudie: Een piano bouwen in WebXR met behulp van Babylon.js

Artikel
07/12/2023

Het bouwen van een piano in de echte wereld vereist veel tijd, vaardigheden en materialen. Hoe zit het met het bouwen van een voor de VR/AR-wereld?

In deze reeks zelfstudies leert u hoe u Babylon.js kunt gebruiken om een Mixed Reality web-app te maken die een werkende 88 toetsen staande piano in de virtuele wereld bevat. In de voltooide app kunt u teleporteren naar de piano en de toetsen spelen met behulp van uw mixed reality-controllers.

In deze reeks zelfstudies leert u het volgende:

Meshes maken, positioneren en samenvoegen om een pianotoetsenbord te bouwen
Een Babylon.js model van een staand pianoframe importeren
Aanwijzerinteracties toevoegen aan elke pianotoets
Teleportatie en multipointer-ondersteuning inschakelen in WebXR

Vereisten

Een computer die is verbonden met internet
Basiskennis van Javascript
Zelfstudie voor WebXR Javascript Hallo wereld
Door WebXR ondersteunde browser, bijvoorbeeld Microsoft Edge
Babylon.js 4.2 of hoger
Elke VR-headset of Windows Mixed Reality simulator
Optioneel: Windows 10 Creator Update als u een Windows Mixed Reality Simulator wilt gebruiken

Aan de slag

Laten we beginnen met het instellen van de HTML-webpagina die de Babylon.js scène bevat.

Maak een map met de naam babylonjs-piano-tutorial en open de map in Visual Studio Code.

Notitie

Hoewel u elke code-editor kunt gebruiken om mee te doen, gebruiken we Visual Studio Code in deze zelfstudie voor het gemak.

Maak in de map een bestand met de naam index.html en voeg de onderstaande sjabloon in het bestand in:

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

Als u meer uitleg nodig hebt over de inhoud van deze sjabloon, raadpleegt u de Hallo wereld Zelfstudie. Dit is een vereiste voor deze zelfstudie.

Als u dit bestand probeert te openen in een browser, wordt in de console een fout weergegeven die aangeeft dat de createScene() functie niet is gevonden. Laten we deze fout oplossen door de functie createScene() in de volgende sectie te implementeren.

De scène instellen

Maak in dezelfde map als index.htmleen ander bestand met de naam scene.js. We slaan alle Javascript-code op met betrekking tot het instellen van de scène en het maken van de piano in dit bestand.
Laten we de createScene() functie toevoegen aan scene.js:
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);
    return scene;
}
```
Houd er rekening mee dat we een asynchrone functie maken createScene() . Blijf op de hoogte om erachter te komen waarom.
Vervolgens hebben we een lampje en een camera nodig om de scène zichtbaar te maken voor ons. Werk de functie bij 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;
}
```
Hier hebben we een ArcRotateCamera gemaakt, die bijna volledig naar beneden wijst en zich richt op het oorsprongspunt van de ruimte. Het licht dat we hebben gecreëerd, is een HemisphericLight dat naar de hemel wijst en handig is voor het simuleren van een omgevingsruimte. We hebben het licht ook een beetje gedimd door de intensiteit ervan te verlagen.

Als u een opfrisser nodig hebt voor het maken van een camera en een lampje, gaat u terug naar de sectie Scène voorbereiden van de Hallo wereld zelfstudiereeks voordat u doorgaat met de volgende stap.
Ten slotte moeten we, omdat we ontwikkelen voor een WebXR-platform, de XR-ervaring in de scène inschakelen door de volgende regel in te voegen vóór return scene;:
```
const xrHelper = await scene.createDefaultXRExperienceAsync();
```
Als u in Javascript het await trefwoord wilt gebruiken voor een async functie binnen een functie, moet de bovenliggende functie ook zijn async, daarom hebben we createScene functie eerder gedefinieerd als asynchroon. Verderop in deze reeks zelfstudies gebruiken we deze xrHelper om verschillende WebXR-functies in te schakelen en te configureren die worden ondersteund door Babylon.js.

De voltooide scene.js moet er als volgt uitzien:

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

Nu we een werkende createScene() functie hebben, gaan we hetscene.js-bestandindex.html laden als een script , zodat de createScene() functie wordt herkend in index.html. Voeg deze regel code toe aan de <header> sectie van het HTML-bestand:

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

Open index.html in uw browser. Het foutbericht dat we eerder hebben gezien, is niet meer aanwezig en er is een lege Babylon.js scène op de pagina.

Volgende stappen

Volgende zelfstudie: Een 3D-pianomodel bouwen

Zelfstudie: Een piano bouwen in WebXR met behulp van Babylon.js

Vereisten

Aan de slag

De scène instellen

Volgende stappen

Aanvullende resources