Esercitazione: Creare la prima applicazione WebXR usando Babylon.js

  • Articolo

Questa esercitazione illustra come creare un'app di base Realtà mista usando Babylon.js e Visual Studio Code. L'app che eseguirà la compilazione eseguirà il rendering di un cubo, consente di ruotarla per visualizzare gli altri volti e aggiungere interazioni. In questa esercitazione verranno illustrate le procedure per:

  • Configurare un ambiente di sviluppo
  • API Babylon.js per creare elementi 3D di base
  • Creare una nuova pagina Web
  • Interagire con gli elementi 3D
  • Eseguire l'applicazione in un simulatore di Windows Mixed Reality

Prerequisiti

Introduzione

Per creare questo progetto da zero, iniziare con un progetto Visual Studio Code (VSCode).

Nota

L'uso di VSCode non è obbligatorio, ma verrà usato per praticità in tutta l'esercitazione. Gli sviluppatori JavaScript più esperti possono usare qualsiasi altro editor scelto, anche il blocco note più semplice.

  1. Scaricare il Babylon.js singolo file o usare una versione online disponibile nel sito Web ufficiale Babylon.js. È anche possibile clonare l'intero progetto Babylon.js da GitHub

  2. Creare un file vuoto e salvarlo come pagina html, ad esempio index.html

  3. Creare un markup html di base e fare riferimento al file javascript Babylon.js. Il codice finale è illustrato di seguito:

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

  4. Aggiungere un elemento HTML canvas all'interno del corpo per eseguire il rendering del contenuto di Babylon.js. Si noti che l'area di disegno ha un attributo ID, che consente di accedere a questo elemento HTML da JavaScript in un secondo momento.

    <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. L'area di disegno occupa l'intera pagina Web. Che completa la pagina Web. A questo punto, la pagina Web è pronta. È possibile aprirlo in qualsiasi browser e assicurarsi che non siano stati visualizzati errori, anche se non esiste ancora un'esperienza immersiva.

Passaggi successivi

Esercitazione successiva: 2. Preparare una scena