Oktatóanyag: Az első WebXR-alkalmazás létrehozása Babylon.js

  • Cikk

Ez az oktatóanyag bemutatja, hogyan hozhat létre alapszintű Mixed Reality alkalmazást a Babylon.js és a Visual Studio Code használatával. A összeállítani kívánt alkalmazás egy kockát jelenít meg, elforgatja a többi arcot, és interakciókat ad hozzá. Eben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • Fejlesztési környezet beállítása
  • A Babylon.js API alapszintű 3D-elemek létrehozásához
  • Új weblap létrehozása
  • 3D-elemek használata
  • Az alkalmazás futtatása Windows Mixed Reality-szimulátorban

Előfeltételek

Első lépések

A projekt létrehozásához először egy Visual Studio Code-projekttel (VSCode) kell kezdenie.

Megjegyzés

A VSCode használata nem kötelező, de az oktatóanyag során a kényelem érdekében fogjuk használni. A tapasztaltabb JavaScript-fejlesztők bármilyen más szerkesztőt használhatnak, még a legegyszerűbb Jegyzettömbet is.

  1. Töltse le az Babylon.js egyetlen fájlt, vagy használjon egy online verziót, amely megtalálható a hivatalos Babylon.js webhelyen. A teljes Babylon.js projektet a GitHubról is klónozhatja

  2. Hozzon létre egy üres fájlt, és mentse html-lapként, például index.html

  3. Hozzon létre egy egyszerű HTML-korrektúrát, és hivatkozzon a Babylon.js javascript-fájlra. A végső kód az alábbi módon jelenik meg:

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

  4. Adjon hozzá egy vászon HTML-elemet a törzsbe a Babylon.js tartalmának megjelenítéséhez. Vegye figyelembe, hogy a vászon rendelkezik egy azonosító attribútummal, amely lehetővé teszi, hogy később a JavaScriptből elérhesse ezt a HTML-elemet.

    <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. A vászon elfoglalja a teljes weblapot. Ez befejezi a weblapot. Ezen a ponton a weblap készen áll. Bármilyen böngészőben megnyithatja, és győződjön meg arról, hogy nincsenek hibák, bár még nincs modern felület.

Következő lépések

Következő oktatóanyag: 2. Jelenet előkészítése