Samouczek: tworzenie fortepianu w usłudze WebXR przy użyciu Babylon.js

  • Artykuł

Budowanie fortepianu w świecie rzeczywistym wymaga dużo czasu, umiejętności i materiałów. A co z budową jednego dla świata VR/AR?

Z tej serii samouczków dowiesz się, jak za pomocą Babylon.js utworzyć aplikację internetową Mixed Reality zawierającą działający 88-key standup piano w świecie wirtualnym. W ukończonej aplikacji będziesz w stanie teleportować do fortepianu i odtwarzać klucze przy użyciu kontrolerów rzeczywistości mieszanej.

Z tej serii samouczków dowiesz się, jak wykonywać następujące działania:

  • Tworzenie, pozycjonowanie i scalanie siatki w celu utworzenia klawiatury fortepianowej
  • Importowanie modelu Babylon.js ramki fortepianowej standup
  • Dodawanie interakcji wskaźnika do każdego klawisza fortepianowego
  • Włączanie obsługi teleportacji i multipointerów w usłudze WebXR

Wymagania wstępne

Wprowadzenie

Zacznijmy od skonfigurowania strony internetowej HTML zawierającej scenę Babylon.js.

  1. Utwórz folder o nazwie babiljs-piano-tutorial i otwórz folder w Visual Studio Code.

    Uwaga

    Chociaż możesz użyć dowolnego edytora kodu do wykonywania kroków, będziemy używać Visual Studio Code w tym samouczku dla wygody.

  2. W folderze utwórz plik o nazwie index.html i wstaw poniższy szablon do pliku:

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

    Jeśli potrzebujesz więcej informacji na temat zawartości tego szablonu, zobacz samouczek Hello world, który jest wymaganiem wstępnym tego samouczka.

  3. Jeśli spróbujesz otworzyć ten plik w przeglądarce, w konsoli zostanie wyświetlony błąd wskazujący, że createScene() funkcja nie zostanie znaleziona. Rozwiążmy ten błąd, implementując funkcję createScene() w następnej sekcji.

Konfigurowanie sceny

  1. W tym samym folderze co index.htmlutwórz inny plik o nazwie scene.js. Zapiszemy cały kod javascript związany z konfigurowaniem sceny i tworzeniem fortepianu w tym pliku.

  2. Dodajmy createScene() funkcję do scene.js:

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

    Pamiętaj, że tworzymy createScene() funkcję asynchronizową. Bądź na bieżąco, aby dowiedzieć się, dlaczego.

  3. Następnie będziemy potrzebować światła i kamery, aby scena stanie się dla nas widoczna. createScene() Zaktualizuj funkcję:

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

    W tym miejscu utworzyliśmy arcRotateCamera, który wskazuje prawie całkowicie w dół i wskazuje punkt początkowy przestrzeni. Światło, które stworzyliśmy, to HemisphericLight , który wskazuje na niebo i jest przydatny do symulowania przestrzeni otoczenia. Przyciemnialiśmy również światło trochę, obniżając jego intensywność.

    Jeśli potrzebujesz odświeżenia, aby dowiedzieć się, jak utworzyć kamerę i światło, przed przejściem do następnego kroku ponownie zapoznaj się z sekcją Przygotowywanie sceny z serii samouczków Hello world.

  4. Na koniec, ponieważ opracowujemy dla platformy WebXR, musimy włączyć środowisko XR w scenie, wstawiając następujący wiersz przed return scene;:

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    W języku JavaScript, aby użyć słowa kluczowego awaitasync w funkcji w ramach funkcji, funkcja nadrzędna musiałaby również mieć asyncwartość , dlatego zdefiniowaliśmy createScene funkcję asynchronizną wcześniej. W dalszej części tej serii samouczków będziemy używać tej xrHelper funkcji do włączania i konfigurowania różnych funkcji WebXR obsługiwanych przez Babylon.js.

  5. Ukończona scene.js powinna wyglądać następująco:

    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. Teraz, gdy mamy działającą createScene() funkcję ,index.html załadować plik scene.js jako skrypt, aby createScene() funkcja została rozpoznana w index.html. Dodaj ten wiersz kodu w <header> sekcji pliku 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. Otwórz index.html w przeglądarce i zobaczysz, że wyświetlony wcześniej komunikat o błędzie nie jest już obecny i na stronie znajduje się pusta scena Babylon.js.

Następne kroki

Następny samouczek: Tworzenie modelu fortepianu 3D