Tutorial: Construa um piano em WebXR usando Babylon.js

Construir um piano no mundo real requer muito no caminho do tempo, habilidades e materiais. Que tal construir um para o mundo VR/AR?

Nesta série tutorial, você vai aprender a usar Babylon.js para criar uma aplicação web de Realidade Mista que contém um piano de stand-up de 88 chaves funcional no mundo virtual. Na aplicação completa, poderás teletransportar-te para o piano e tocar as teclas usando os teus controladores de realidade mista.

Nesta série tutorial, aprenderá a:

  • Criar, posicionar e fundir malhas para construir um teclado de piano
  • Importe um modelo Babylon.js de uma moldura de piano stand-up
  • Adicione interações de ponteiro a cada tecla de piano
  • Permitir o teletransporte e suporte de multiponto no WebXR

Pré-requisitos

Introdução

Vamos começar por configurar a página web HTML que conterá a cena Babylon.js.

  1. Crie uma pasta chamada babylonjs-piano-tutorial e abra a pasta em Visual Studio Código.

    Nota

    Enquanto você pode usar qualquer editor de código para acompanhar, nós usaremos Visual Studio Código durante todo este tutorial por conveniência.

  2. Dentro da pasta, crie um ficheiro nomeado index.html e insira o modelo abaixo no ficheiro:

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

    Se precisar de mais explicações sobre o conteúdo deste modelo, consulte o Hello World Tutorial, que é um pré-requisito deste tutorial.

  3. Se tentar abrir este ficheiro num browser, a consola apresenta um erro que indica que a createScene() função não foi encontrada. Vamos resolver este erro implementando a função createScene() na secção seguinte.

Configurar a cena

  1. Na mesma pasta queindex.html, crie outro ficheiro chamado scene.js. Armazenaremos todo o código javascript relacionado com a configuração da cena e a criação do piano neste ficheiro.

  2. Vamos adicionar a createScene() função a createScene()

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

    Note que estamos a fazer createScene() uma função assídua. Fique ligado para descobrir o porquê.

  3. A seguir, precisamos de uma luz e de uma câmara para tornar a cena visível para nós. Atualizar a createScene() função:

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

    Aqui, criámos um ArcRotateCamera,que aponta quase completamente para baixo e visa o ponto de origem do espaço. A luz que criamos é uma Luz Hemisférica que aponta para o céu e é útil para simular um espaço ambiente. Também diminuimos um pouco a luz, baixando a intensidade.

    Se precisar de um refrescante sobre como criar uma câmara e uma luz, reveja a secção Prepare Cena da Série Tutorial hello World antes de seguir para o passo seguinte.

  4. Finalmente, uma vez que estamos a desenvolver para uma plataforma WebXR, precisamos de permitir a experiência XR na cena, inserindo a seguinte linha antes de:

    const xrHelper = await scene.createDefaultXRExperienceAsync();
    

    No javascript, para usar a await palavra-chave numa async função dentro de uma função, a função principal também teria de ser async , razão pela qual definimos createScene a função como async anteriormente. Mais tarde nesta série tutorial, vamos usá-lo xrHelper para permitir e configurar diferentes funcionalidades WebXR suportadas por Babylon.js.

  5. A scene.js completa deve ser assim:

    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. Agora que temos uma createScene() função de trabalho, vamos ter createScene() carregar o ficheiro scene.js como um script para que a função seja reconhecida em index.html. Adicione esta linha de código na <header> secção do ficheiro 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. Abra index.html no seu navegador e verá que a mensagem de erro que vimos anteriormente já não está presente, e temos uma cena de Babylon.js vazia na página.

Passos seguintes