Tutorial: Creación de la primera aplicación WebXR mediante babylon.jsTutorial: Create your first WebXR application using babylon.js

En este tutorial verá cómo crear una aplicación básica de realidad mixta mediante babylon.js y Visual Studio Code.This tutorial will show you how to create a basic Mixed Reality app using babylon.js and Visual Studio Code. La aplicación que va a compilar representará un cubo, le permitirá girarlo para poder ver las otras caras, y agregar interacciones.The app you're going to build will render a cube, let you rotate it to bring the other faces into view, and add interactions. En este tutorial aprenderá a:In this tutorial, you learn how to:

  • Configurar entorno de desarrolloSet up a development environment
  • Usar la API babylon.js para crear elementos 3D básicosThe babylon.js API to create basic 3D elements
  • Crear una nueva página webCreate a new web page
  • Interactuar con elementos 3DInteract with 3D elements
  • Ejecutar la aplicación en un simulador de Windows Mixed RealityRun the application in a Windows Mixed Reality Simulator

PrerrequisitosPrerequisites

IntroducciónGetting started

Para crear este proyecto desde cero, comience con un proyecto de Visual Studio Code (VSCode).To create this project from scratch, start with a Visual Studio Code (VSCode) project.

Nota

No es obligatorio usar VSCode, pero lo usaremos para mayor practicidad a lo largo del tutorial.Using VSCode isn't mandatory, but we'll be using it for convenience throughout the tutorial. Los desarrolladores de JavaScript más experimentados pueden usar cualquier otro editor de su elección, incluso el más sencillo Bloc de notas.More experienced JavaScript developers can use any other editor of their choice, even the simplest Notepad.

  1. Descargue el archivo único babylon.js o use una versión en línea que se puede encontrar en el sitio web oficial de babylon.js.Either download the babylon.js single file or use an online version that can be found on the official babylon.js web site. También puede clonar todo el proyecto de babylon.js desde GitHub.You can also clone the entire babylon.js project from GitHub

  2. Cree un archivo vacío y guárdelo como página HTML, por ejemplo, index.html.Create an empty file and save it as html page, for example index.html

  3. Cree un marcado HTML básico y haga referencia al archivo de JavaScript babylon.js.Create a basic html markup and reference the babylon.js javascript file. El código final se muestra a continuación:The final code is as shown below:

    <html>
        <head>
            <title>Babylon.js sample code</title>
            <script src="https://cdn.babylonjs.com/babylon.js"></script>
        </head>
    <body>
    </body>
    </html>
    
  4. Agregue un elemento HTML canvas dentro del cuerpo para representar el contenido de babylon.js.Add a canvas HTML element inside the body to render the contents of babylon.js. Tenga en cuenta que canvas tiene un atributo id, lo que le permite acceder a este elemento HTML desde JavaScript más adelante.Note that the canvas has an id attribute, which lets you access this HTML element from JavaScript later on.

    <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. Canvas ocupa toda la página web.The canvas occupies the entire web page. Con esto se completa nuestra página web.That completes our web page. Llegados a este punto, la página web está lista.At this point, the web page is ready. Puede abrirla en cualquier explorador y asegurarse de que no aparezca ningún error, aunque todavía no hay ninguna experiencia envolvente.You can open it in any browser and ensure there are no errors shown, though there is no immersive experience yet.

Pasos siguientesNext steps