Esercitazione: Creare la prima applicazione WebXR usando babylon.js

Questa esercitazione illustra come creare un'app di realtà mista di base usando babylon.js e Visual Studio Code. L'app che si sta per compilare eseguirà il rendering di un cubo, consente di ruotarlo per visualizzare gli altri visi 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

Guida introduttiva

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

Nota

L'uso di VSCode non è obbligatorio, ma verrà utilizzato per praticità durante l'esercitazione. Gli sviluppatori JavaScript più esperti possono usare qualsiasi altro editor di propria scelta, anche il Blocco note più semplice.

  1. Scaricare il babylon.js file singolo o usare una versione online disponibile nel sito Web ufficiale babylon.js. È anche possibile clonare l'intero babylon.js progetto 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 babylon.js javascript. Il codice finale è come 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 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. Questa operazione completa la pagina Web. A questo punto, la pagina Web è pronta. È possibile aprirlo in qualsiasi browser e assicurarsi che non siano visualizzati errori, anche se non è ancora presente alcuna esperienza immersiva.

Passaggi successivi