Sdílet prostřednictvím

Kurz: Vytvoření první aplikace WebXR pomocí Babylon.js

  • Článek

V tomto kurzu se dozvíte, jak vytvořit základní Mixed Reality aplikaci pomocí Babylon.js a Editoru Visual Studio Code. Aplikace, kterou chcete vytvořit, vykresluje datovou krychli, umožní vám ji otočit, aby se zobrazily další tváře, a přidat interakce. V tomto kurzu se naučíte:

  • Nastavení vývojového prostředí
  • Rozhraní API Babylon.js pro vytváření základních 3D prvků
  • Vytvoření nové webové stránky
  • Interakce s 3D prvky
  • Spuštění aplikace v simulátoru Windows Mixed Reality

Požadavky

Začínáme

Pokud chcete tento projekt vytvořit úplně od začátku, začněte s projektem Visual Studio Code (VSCode).

Poznámka

Použití VSCode není povinné, ale v průběhu kurzu ho budeme používat pro usnadnění práce. Zkušenější vývojáři JavaScriptu mohou použít jakýkoli jiný editor podle svého výběru, a to i nejjednodušší Poznámkový blok.

  1. Stáhněte si Babylon.js jeden soubor nebo použijte online verzi, kterou najdete na oficiálním webu Babylon.js. Můžete také naklonovat celý projekt Babylon.js z GitHubu.

  2. Vytvořte prázdný soubor a uložte ho jako stránku html, například index.html

  3. Vytvořte základní kód HTML a odkazujte na Babylon.js javascriptový soubor. Konečný kód je uvedený níže:

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

  4. Přidejte do textu element HTML plátna , který vykreslí obsah Babylon.js. Všimněte si, že plátno má atribut id, který vám umožní přístup k tomuto elementu HTML z JavaScriptu později.

    <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. Plátno zabírá celou webovou stránku. Tím se naše webová stránka dokončí. V tomto okamžiku je webová stránka připravená. Můžete ho otevřít v libovolném prohlížeči a ujistit se, že se nezobrazují žádné chyby, i když zatím neexistuje žádné imerzivní prostředí.

Další kroky

Další kurz: 2. Příprava scény