Kurz: vytvoření klavír v WebXR pomocí Babylon.js

Sestavování klavír v reálném světě vyžaduje značnou dobu, dovednosti a materiály. Jak sestavit jednu pro VR/AR World?

V této sérii kurzů se naučíte, jak pomocí Babylon.js vytvořit webovou aplikaci ve hybridní realitě, která ve virtuálním světě obsahuje funkční klavír 88-Key rychlou schůzku. V dokončené aplikaci budete moct teleport k klavír a přehrávat klíče pomocí hybridních řadičů realit.

V této sérii kurzů se naučíte:

  • Vytváření, umístění a sloučení sítí k vytvoření klavír klávesnice
  • Import Babylon.js modelu klavír rámce rychlou schůzku
  • Přidat interakce ukazatelů ke každému klavír klíči
  • Povolení přepravců a podpora více ukazatelů v WebXR

Požadavky

Začínáme

Pojďme začít nastavením webové stránky HTML, která bude obsahovat Babylon.js scénu.

  1. Vytvořte složku s názvem babylonjs-klavír-tutorial a otevřete složku v Visual Studio Code.

    Poznámka

    i když můžete použít jakýkoliv editor kódu, který se bude sledovat, budeme používat Visual Studio Code v celém tomto kurzu pro usnadnění práce.

  2. V rámci složky vytvořte soubor s názvem index.html a do souboru vložte níže uvedenou šablonu:

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

    Pokud potřebujete další vysvětlení obsahu této šablony, přečtěte si kurz Hello World, který je předpokladem tohoto kurzu.

  3. Pokud se pokusíte otevřít tento soubor v prohlížeči, konzola zobrazí chybu oznamující, že createScene() funkce nebyla nalezena. Pojďme tuto chybu vyřešit implementací funkce createScene() v následující části.

Nastavení scény

  1. Ve stejné složce jako index.htmlvytvořte jiný soubor s názvem scene.js. Uložíme veškerý kód JavaScriptu, který souvisí s nastavením scény a vytvořením klavír v tomto souboru.

  2. Pojďme přidat createScene() funkci do createScene():

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

    Všimněte si, že provádíme createScene() asynchronní funkci. Sledujte, co je potřeba zjistit, proč.

  3. Dále budeme potřebovat světlo a kameru, aby byla scéna viditelná pro nás. Aktualizujte createScene() funkci:

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

    Tady jsme vytvořili ArcRotateCamera, který ukazuje téměř úplně dolů a cílí na původní bod prostoru. Světleme, že jsme vytvořili, je HemisphericLight , který odkazuje na nebe a je vhodný pro simulaci okolního prostoru. Vypnuli jsme ještě trochu světla tím, že snížíte jeho intenzitu.

    Pokud potřebujete aktualizační program, jak vytvořit kameru a světlou, přečtěte si část Příprava scény Hello World řady kurzů , než přejdete k dalšímu kroku.

  4. Nakonec, vzhledem k tomu, že vyvíjíme pro platformu WebXR, budeme muset Povolit prostředí XR na scéně vložením následujícího řádku do :

    const xrHelper = await scene.createDefaultXRExperienceAsync();
    

    V jazyce JavaScript, aby bylo možné použít await klíčové slovo async funkce ve funkci, by měla být také použita nadřazená funkce async , což je důvod, proč jsme definovali createScene funkci jako dříve asynchronní. Později v této sérii kurzů tuto možnost použijeme xrHelper k povolení a konfiguraci různých funkcí WebXR, které podporuje Babylon.js.

  5. Dokončený scene.js by měl vypadat takto:

    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. Teď, když máme pracovní createScene() funkci, createScene() načíst soubor scene.js jako skript, aby byla funkce rozpoznaná v index.html. Přidejte tento řádek kódu do <header> části souboru 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. V prohlížeči otevřete index.html a zjistíte, že tato chybová zpráva, kterou jsme viděli dříve, už není k dispozici, a na stránce je prázdná Babylon.jsá scéna.

Další kroky