Udostępnij za pośrednictwem

Samouczek: tworzenie pierwszej aplikacji WebXR przy użyciu Babylon.js

  • Artykuł

W tym samouczku pokazano, jak utworzyć podstawową aplikację Mixed Reality przy użyciu Babylon.js i Visual Studio Code. Aplikacja, którą zamierzasz skompilować, renderuje moduł, pozwala obracać go, aby wyświetlić inne twarze i dodawać interakcje. Ten samouczek zawiera informacje na temat wykonywania następujących czynności:

  • Konfigurowanie środowiska projektowego
  • Interfejs API Babylon.js do tworzenia podstawowych elementów 3D
  • Tworzenie nowej strony internetowej
  • Interakcja z elementami 3D
  • Uruchamianie aplikacji w symulatorze Windows Mixed Reality

Wymagania wstępne

Wprowadzenie

Aby utworzyć ten projekt od podstaw, zacznij od projektu Visual Studio Code (VSCode).

Uwaga

Używanie programu VSCode nie jest obowiązkowe, ale będziemy używać go dla wygody w całym samouczku. Bardziej doświadczeni deweloperzy języka JavaScript mogą używać dowolnego innego wybranego edytora, nawet najprostszego Notatnika.

  1. Pobierz Babylon.js pojedynczy plik lub użyj wersji online, którą można znaleźć w oficjalnej witrynie internetowej Babylon.js. Możesz również sklonować cały projekt Babylon.js z usługi GitHub

  2. Utwórz pusty plik i zapisz go jako stronę HTML, na przykład index.html

  3. Utwórz podstawowy kod HTML i odwołuj się do pliku javascript Babylon.js. Końcowy kod jest pokazany poniżej:

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

  4. Dodaj element HTML kanwy wewnątrz treści, aby renderować zawartość Babylon.js. Zwróć uwagę, że kanwa ma atrybut id, który umożliwia dostęp do tego elementu HTML z języka JavaScript później.

    <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. Kanwa zajmuje całą stronę internetową. To kończy naszą stronę internetową. Na tym etapie strona internetowa jest gotowa. Można go otworzyć w dowolnej przeglądarce i upewnić się, że nie są wyświetlane żadne błędy, choć nie ma jeszcze środowiska immersyjnego.

Następne kroki

Następny samouczek: 2. Przygotowywanie sceny