Oktatóanyag: Az első WebXR-alkalmazás létrehozása Babylon.js
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
- WebXR által támogatott böngésző, például Microsoft Edge
- Babylon.js 4,2 vagy újabb
- Nodejs
- Nem kötelező: Windows 10 létrehozó frissítését, ha Windows Mixed Reality szimulátort szeretne használni
- Nem kötelező: Windows Mixed Reality szimulátor
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.
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
Hozzon létre egy üres fájlt, és mentse html-lapként, például index.html
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>
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>
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.