Condividi tramite

Esercitazione: Creare un pianoforte in WebXR usando Babylon.js

La costruzione di un pianoforte nel mondo reale richiede molto tempo, abilità e materiali. Che ne dici di crearne 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 standup a 88 tasti funzionante nel mondo virtuale. Nell'app completata puoi teletrasportarti al pianoforte e suonare i tasti usando i controller di realtà mista.

In questa serie di esercitazioni si apprenderà come:

  • Creare, posizionare e unire mesh per creare una tastiera per pianoforte
  • Importare un modello Babylon.js di una cornice per pianoforte in piedi
  • Aggiungere interazioni puntatore a ogni tasto del pianoforte
  • Abilitare il teletrasporto e il supporto multipointer 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 per seguire questa procedura, visual Studio Code verrà usato per praticità in questa esercitazione.

  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 è stata 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. Verrà archiviato tutto il codice javascript relativo alla configurazione della scena e alla creazione del pianoforte 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 stiamo creando createScene() una funzione asincrona. Restate sintonizzati per scoprire perché.

  3. Successivamente, avremo bisogno di una luce e una fotocamera per rendere la scena visibile 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;
}

    In questo caso, abbiamo creato un ArcRotateCamera, che punta quasi completamente verso il basso e punta al punto di origine dello spazio. La luce che abbiamo creato è una HemisphericLight che punta al cielo ed è utile per simulare uno spazio ambientale. Abbiamo anche attenuato leggermente la luce abbassandone l'intensità.

    Se hai bisogno di un aggiornamento su come creare una fotocamera e una luce, rivisitare la sezione Preparare la scena della serie di esercitazioni Hello World prima di procedere al passaggio successivo.

  4. Infine, poiché si sta sviluppando 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 async funzione all'interno di una 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 xrHelper per abilitare e configurare diverse funzionalità WebXR supportate da Babylon.js.

  5. Il scene.js completato dovrebbe essere 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() , è necessario caricareindex.html il file scene.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 noterà che il messaggio di errore visualizzato in precedenza non è più presente e nella pagina è presente una scena Babylon.js vuota.

Passaggi successivi

Esercitazione successiva: Compilare un modello di pianoforte 3D

  • Last updated on