Sdílet prostřednictvím

Kurz: Sestavení klavíru ve WebXR pomocí Babylon.js

  • Článek

Vytvoření klavíru v reálném světě vyžaduje hodně času, dovedností a materiálů. Co takhle stavět pro virtuální realitu a ar svět?

V této sérii kurzů se dozvíte, jak pomocí Babylon.js vytvořit Mixed Reality webovou aplikaci, která bude obsahovat funkční standup piano s 88 klávesy ve virtuálním světě. V dokončené aplikaci budete moct teleportovat k klavíru a přehrávat klávesy pomocí ovladačů hybridní reality.

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

  • Vytvoření, umístění a sloučení sítí pro vytvoření klavírní klávesnice
  • Import Babylon.js modelu standup piano frame
  • Přidání interakcí s ukazatelem ke každé klavírní klávese
  • Povolení podpory teleportace a vícepointerů v WebXR

Požadavky

Začínáme

Začněme nastavením webové stránky HTML, která bude obsahovat Babylon.js scénu.

  1. Vytvořte složku s názvem babylonjs-piano-tutorial a otevřete ji v editoru Visual Studio Code.

    Poznámka

    I když k tomu můžete použít libovolný editor kódu, pro usnadnění práce budeme v tomto kurzu používat Visual Studio Code.

  2. Ve složce vytvořte soubor s názvemindex.html a vložte do něj následující š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, projděte si kurz Hello World, který je předpokladem tohoto kurzu.

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

Nastavení scény

  1. Ve stejné složce jako index.htmlvytvořte další soubor s názvemscene.js. Do tohoto souboru uložíme veškerý kód javascriptu související s nastavením scény a vytvořením klavíru.

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

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

    Všimněte si, že vytváříme createScene() asynchronní funkci. Zůstaňte naladěni na to, abyste zjistili proč.

  3. Dále budeme potřebovat světlo a kameru, aby byla scéna viditelná. 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 počáteční bod prostoru. Světlo, které jsme vytvořili, je HemisphericLight , které ukazuje na oblohu a je užitečné pro simulaci okolního prostoru. Světlo jsme také trochu ztlumili tím, že jsme snížili jeho intenzitu.

    Pokud potřebujete osvěžit, jak vytvořit kameru a světlo, před pokračováním k dalšímu kroku se znovu projděte část Příprava scény v Hello World Tutorial Series.

  4. Vzhledem k tomu, že vyvíjíme pro platformu WebXR, budeme muset povolit prostředí XR ve scéně vložením následujícího řádku před return scene;:

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    Aby bylo možné použít await klíčové slovo pro async funkci v rámci funkce, musí být asyncv javascriptu také nadřazená funkce , což je důvod, proč jsme dříve definovali createScene funkci jako asynchronní. Později v této sérii kurzů ji xrHelper použijeme k povolení a konfiguraci různých funkcí WebXR podporovaných 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 funkční createScene() funkci, index.html načíst souborscene.js jako skript, aby createScene() se funkce rozpoznala v index.html. Do oddílu <header> souboru HTML přidejte tento řádek kódu:

    <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. Otevřete index.html v prohlížeči a zjistíte, že chybová zpráva, kterou jsme viděli dříve, už neexistuje a na stránce je prázdná Babylon.js scéna.

Další kroky

Další kurz: Vytvoření 3D modelu klavíru