Dela via

Självstudie: Skapa ditt första WebXR-program med Babylon.js

  • Artikel

Den här självstudien visar hur du skapar en grundläggande Mixed Reality app med hjälp av Babylon.js och Visual Studio Code. Appen som du ska skapa renderar en kub, gör att du kan rotera den för att visa de andra ansiktena och lägga till interaktioner. I den här guiden får du lära dig att:

  • Konfigurera en utvecklingsmiljö
  • Det Babylon.js API:et för att skapa grundläggande 3D-element
  • Skapa en ny webbsida
  • Interagera med 3D-element
  • Köra programmet i en Windows Mixed Reality simulator

Förutsättningar

Komma igång

Om du vill skapa det här projektet från grunden börjar du med ett Visual Studio Code-projekt (VSCode).

Anteckning

Det är inte obligatoriskt att använda VSCode, men vi kommer att använda det för enkelhetens skull under hela självstudien. Mer erfarna JavaScript-utvecklare kan använda valfri annan redigerare, även det enklaste Anteckningar.

  1. Ladda antingen ned Babylon.js enskild fil eller använd en onlineversion som finns på den officiella Babylon.js webbplats. Du kan också klona hela Babylon.js projektet från GitHub

  2. Skapa en tom fil och spara den som html-sida, till exempel index.html

  3. Skapa en grundläggande HTML-kod och referera till Babylon.js javascript-fil. Den slutliga koden visas nedan:

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

  4. Lägg till ett HTML-element för arbetsytor i brödtexten för att återge innehållet i Babylon.js. Observera att arbetsytan har ett ID-attribut som gör att du kan komma åt det här HTML-elementet från JavaScript senare.

    <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. Arbetsytan tar upp hela webbsidan. Det slutför vår webbsida. Nu är webbsidan klar. Du kan öppna den i valfri webbläsare och se till att inga fel visas, även om det inte finns någon integrerande upplevelse ännu.

Nästa steg

Nästa självstudie: 2. Förbereda en scen