Tutorial: Erstellen Ihrer ersten WebXR-Anwendung mit Babylon.js

  • Artikel

In diesem Tutorial erfahren Sie, wie Sie mithilfe von Babylon.js und Visual Studio Code eine einfache Mixed Reality-App erstellen. Die App, die Sie erstellen werden, rendert einen Cube, ermöglicht es Ihnen, ihn zu drehen, um die anderen Flächen sichtbar zu machen, und Interaktionen hinzuzufügen. In diesem Tutorial lernen Sie Folgendes:

  • Einrichten einer Entwicklungsumgebung
  • Die Babylon.js-API zum Erstellen einfacher 3D-Elemente
  • Erstellen einer neuen Webseite
  • Interagieren mit einem 3D-Objekt
  • Ausführen der Anwendung in einem Windows Mixed Reality-Simulator

Voraussetzungen

Erste Schritte

Um dieses Projekt von Grund auf neu zu erstellen, beginnen Sie mit einem Visual Studio Code-Projekt (VSCode).

Hinweis

Die Verwendung von VSCode ist nicht obligatorisch, aber wir verwenden sie aus Gründen der Bequemlichkeit während des gesamten Tutorials. Erfahrenere JavaScript-Entwickler können einen beliebigen anderen Editor ihrer Wahl verwenden, sogar den einfachsten Editor.

  1. Laden Sie entweder die Einzeldatei Babylon.js herunter, oder verwenden Sie eine Onlineversion, die auf der offiziellen Babylon.js-Website zu finden ist. Sie können auch das gesamte Babylon.js-Projekt von GitHub klonen.

  2. Erstellen Sie eine leere Datei, und speichern Sie sie als HTML-Seite, z. B. „index.html“.

  3. Erstellen Sie ein einfaches HTML-Markup, und verweisen Sie auf die JavaScript-Datei Babylon.js. Der endgültige Code sieht wie folgt aus:

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
    </head>
<body>
</body>
</html>

  4. Fügen Sie innerhalb des Textkörpers ein Zeichenbereich-HTML-Element hinzu, um den Inhalt von Babylon.js zu rendern. Beachten Sie, dass der Zeichenbereich (canvas) ein ID-Attribut besitzt, mit dem Sie später aus JavaScript auf dieses HTML-Element zugreifen können.

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

  5. Der Zeichenbereich nimmt die gesamte Webseite ein. Damit ist unsere Webseite abgeschlossen. An diesem Punkt ist die Webseite fertig. Sie können sie in jedem Browser öffnen und sicherstellen, dass keine Fehler angezeigt werden, obwohl noch keine immersive Benutzeroberfläche vorhanden ist.

Nächste Schritte

Nächstes Tutorial: 2. Vorbereiten einer Szene