Condividi tramite

Esercitazione: Creare un pianoforte in WebXR usando Babylon.js

  • Articolo

La creazione di un pianoforte nel mondo reale richiede molto tempo, abilità e materiali. Che ne dici di costruire uno per il mondo VR/AR?

In questa serie di esercitazioni si apprenderà come usare Babylon.js per creare un'app Web Realtà mista che contiene un pianoforte a 88 tasti funzionante nel mondo virtuale. Nell'app completata sarà possibile teletrasportare il piano e riprodurre le chiavi usando i controller di realtà mista.

In questa serie di esercitazioni si apprenderà come:

  • Creare, posizionare e unire mesh per creare una tastiera piano
  • Importare un modello di Babylon.js di una cornice di piano standup
  • Aggiungere interazioni puntatore a ogni tasto piano
  • Abilitare il supporto di teleportazione e multipunto in WebXR

Prerequisiti

Introduzione

Per iniziare, configurare la pagina Web HTML che conterrà la scena Babylon.js.

  1. Creare una cartella denominata babylonjs-piano-tutorial e aprire la cartella in Visual Studio Code.

    Nota

    Anche se è possibile usare qualsiasi editor di codice da seguire, in questa esercitazione si userà Visual Studio Code.

  2. All'interno della cartella creare un file denominato index.html e inserire il modello seguente nel file:

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

    Per altre spiegazioni sul contenuto di questo modello, vedere l'esercitazione Hello World, che è un prerequisito di questa esercitazione.

  3. Se si tenta di aprire questo file in un browser, nella console viene visualizzato un errore che indica che la createScene() funzione non viene trovata. Risolvere questo errore implementando la funzione createScene() nella sezione successiva.

Configurare la scena

  1. Nella stessa cartella di index.htmlcreare un altro file denominato scene.js. Verranno archiviati tutti i codici Javascript correlati alla configurazione della scena e alla creazione del piano in questo file.

  2. Aggiungere la createScene() funzione in scene.js:

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

    Si noti che si sta creando createScene() una funzione asincrona. Restate sintonizzati per scoprire perché.

  3. Successivamente, avremo bisogno di una luce e una fotocamera per rendere visibile la scena a noi. Aggiornare la createScene() funzione:

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

    Qui abbiamo creato un ArcRotateCamera, che punta quasi completamente verso il basso e punta al punto di origine dello spazio. La luce creata è un HemisphericLight che punta al cielo ed è utile per simulare uno spazio ambientale. Abbiamo anche disattivato la luce un po'abbassandone l'intensità.

    Se è necessario un aggiornamento su come creare una fotocamera e una luce, rivedere la sezione Prepara scena della serie di esercitazioni Hello World prima di procedere al passaggio successivo.

  4. Infine, poiché si sviluppa per una piattaforma WebXR, sarà necessario abilitare l'esperienza XR nella scena inserendo la riga seguente prima return scene;di :

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    In javascript, per usare la await parola chiave in una funzione all'interno di una async funzione, anche la funzione padre deve essere async, motivo per cui è stata definita createScene la funzione come asincrona in precedenza. Più avanti in questa serie di esercitazioni verrà usato per xrHelper abilitare e configurare diverse funzionalità WebXR supportate da Babylon.js.

  5. Il scene.js completato sarà simile al seguente:

    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. Ora che è disponibile una funzione funzionante createScene() , è index.htmlcaricare il file discene.js come script in modo che la createScene() funzione venga riconosciuta in index.html. Aggiungere questa riga di codice all'interno della <header> sezione del file HTML:

    <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. Aprire index.html nel browser e si scoprirà che il messaggio di errore visualizzato in precedenza non è più presente e nella pagina è presente una scena Babylon.js vuota.

Passaggi successivi

Esercitazione successiva: Creare un modello di pianoforte 3D