Zelfstudie: Uw eerste WebXR-toepassing maken met behulp van Babylon.js

  • Artikel

In deze zelfstudie leert u hoe u een eenvoudige Mixed Reality-app maakt met behulp van Babylon.js en Visual Studio Code. Met de app die u gaat bouwen, wordt een kubus weergegeven, kunt u deze draaien om de andere gezichten in beeld te brengen en worden interacties toegevoegd. In deze zelfstudie leert u het volgende:

  • Een ontwikkelomgeving instellen
  • De Babylon.js-API om eenvoudige 3D-elementen te maken
  • Een nieuwe webpagina maken
  • Interactie met 3D-elementen
  • De toepassing uitvoeren in een Windows Mixed Reality Simulator

Vereisten

Aan de slag

Als u dit project helemaal opnieuw wilt maken, begint u met een Visual Studio Code-project (VSCode).

Notitie

Het gebruik van VSCode is niet verplicht, maar we gebruiken het voor het gemak in de zelfstudie. Meer ervaren JavaScript-ontwikkelaars kunnen elke andere editor van hun keuze gebruiken, zelfs de eenvoudigste Kladblok.

  1. Download het Babylon.js bestand of gebruik een onlineversie die te vinden is op de officiële Babylon.js website. U kunt ook het hele Babylon.js-project klonen vanuit GitHub

  2. Maak een leeg bestand en sla dit op als HTML-pagina, bijvoorbeeld index.html

  3. Maak een eenvoudige HTML-markering en verwijs naar het Babylon.js javascript-bestand. De uiteindelijke code is zoals hieronder wordt weergegeven:

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

  4. Voeg een CANVAS HTML-element toe in de hoofdtekst om de inhoud van Babylon.js weer te geven. Houd er rekening mee dat het canvas een id-kenmerk heeft, waarmee u dit HTML-element later vanuit JavaScript kunt openen.

    <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. Het canvas beslaat de hele webpagina. Dat maakt onze webpagina compleet. Op dit moment is de webpagina gereed. U kunt het openen in elke browser en ervoor zorgen dat er geen fouten worden weergegeven, hoewel er nog geen insluitende ervaring is.

Volgende stappen

Volgende zelfstudie: 2. Een scène voorbereiden