Freigeben über

Tutorial: Erstellen eines Klaviers in WebXR mit Babylon.js

Der Bau eines Klaviers in der realen Welt erfordert viel Zeit, Geschick und Materialien. Wie sieht es mit dem Erstellen einer für die VR/AR-Welt aus?

In dieser Tutorialreihe erfahren Sie, wie Sie mit Babylon.js eine Mixed Reality Web-App erstellen, die ein funktionierendes 88-Tasten-Standup-Piano in der virtuellen Welt enthält. In der fertigen App können Sie sich mit Ihren Mixed Reality-Controllern zum Klavier teleportieren und die Tasten wiedergeben.

In dieser Tutorialreihe erfahren Sie Folgendes:

  • Erstellen, Positionieren und Zusammenführen von Gittern zum Erstellen einer Klaviertastat
  • Importieren eines Babylon.js Modells eines Standup-Klavierrahmens
  • Hinzufügen von Zeigerinteraktionen zu jeder Klaviertaste
  • Aktivieren der Teleportations- und Multipointerunterstützung in WebXR

Voraussetzungen

Erste Schritte

Richten Sie zunächst die HTML-Webseite ein, die die Babylon.js Szene enthält.

  1. Erstellen Sie einen Ordner namens babylonjs-piano-tutorial , und öffnen Sie den Ordner in Visual Studio Code.

    Hinweis

    Sie können zwar jeden Code-Editor verwenden, aber wir verwenden Visual Studio Code in diesem Tutorial zur Vereinfachung.

  2. Erstellen Sie im Ordner eine Datei mit dem Namen index.html , und fügen Sie die folgende Vorlage in die Datei ein:

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

    Wenn Sie weitere Erläuterungen zum Inhalt dieser Vorlage benötigen, lesen Sie das Hallo Welt Tutorial, das eine Voraussetzung für dieses Tutorial ist.

  3. Wenn Sie versuchen, diese Datei in einem Browser zu öffnen, zeigt die Konsole einen Fehler an, der angibt, dass die createScene() Funktion nicht gefunden wurde. Lassen Sie uns diesen Fehler beheben, indem Sie die -Funktion createScene() im nächsten Abschnitt implementieren.

Einrichten der Szene

  1. Erstellen Sie im selben Ordner wie index.htmleine weitere Datei namens scene.js. Wir speichern den gesamten JavaScript-Code, der sich auf das Einrichten der Szene und das Erstellen des Klaviers in dieser Datei bezieht.

  2. Fügen wir die createScene() Funktion scene.jshinzu:

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

    Beachten Sie, dass wir eine asynchrone Funktion erstellen createScene() . Bleiben Sie dran, um herauszufinden, warum.

  3. Als Nächstes benötigen wir ein Licht und eine Kamera, um die Szene für uns sichtbar zu machen. Aktualisieren Sie die createScene() Funktion:

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

    Hier haben wir eine ArcRotateCamera erstellt, die fast vollständig nach unten zeigt und den Ursprungspunkt des Raums anvisiert. Das Licht, das wir geschaffen haben, ist ein HemisphericLight , das auf den Himmel zeigt und nützlich ist, um einen Umgebungsraum zu simulieren. Wir haben das Licht auch ein wenig abgeblendet, indem wir seine Intensität verringert haben.

    Wenn Sie eine Auffrischung zum Erstellen einer Kamera und eines Lichts benötigen, besuchen Sie den Abschnitt Vorbereiten der Szene der Hallo Welt Tutorialreihe, bevor Sie mit dem nächsten Schritt fortfahren.

  4. Da wir für eine WebXR-Plattform entwickeln, müssen wir schließlich die XR-Benutzeroberfläche in der Szene aktivieren, indem wir die folgende Zeile vor return scene;einfügen:

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    Um in javascript die await Schlüsselwort (keyword) für eine async Funktion innerhalb einer Funktion zu verwenden, müsste auch die übergeordnete Funktion seinasync, weshalb wir die Funktion zuvor als asynchron definiert createScene haben. Später in dieser Tutorialreihe verwenden wir dies xrHelper , um verschiedene WebXR-Features zu aktivieren und zu konfigurieren, die von Babylon.js unterstützt werden.

  5. Die abgeschlossene scene.js sollte wie folgt aussehen:

    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. Nachdem wir nun über eine funktionierende createScene() Funktion verfügen, haben wir index.html laden die scene.js Datei als Skript, damit die createScene() Funktion in index.htmlerkannt wird. Fügen Sie diese Codezeile im <header> Abschnitt der HTML-Datei hinzu:

    <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. Öffnen Sie index.html in Ihrem Browser, und Sie werden feststellen, dass die zuvor angezeigte Fehlermeldung nicht mehr vorhanden ist und wir eine leere Babylon.js Szene auf der Seite haben.

Nächste Schritte

Nächstes Tutorial: Erstellen eines 3D-Klaviermodells

  • Last updated on