Compartir a través de

Tutorial: Creación de la primera aplicación WebXR mediante Babylon.js

  • Artículo

En este tutorial verá cómo crear una aplicación básica de realidad mixta mediante Babylon.js y 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. En este tutorial aprenderá a:

  • Configurar entorno de desarrollo
  • Usar la API de Babylon.js para crear elementos 3D básicos
  • Crear una nueva página web
  • Interactuar con elementos 3D
  • Ejecutar la aplicación en un simulador de Windows Mixed Reality

Prerrequisitos

Introducción

Para crear este proyecto desde cero, comience con un proyecto de Visual Studio Code (VSCode).

Nota

No es obligatorio usar VSCode, pero lo usaremos para mayor practicidad a lo largo del 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.

  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. También puede clonar todo el proyecto de Babylon.js desde GitHub.

  2. Cree un archivo vacío y guárdelo como página HTML, por ejemplo, index.html.

  3. Cree un marcado HTML básico y haga referencia al archivo de JavaScript Babylon.js. El código final se muestra a continuación:

    <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. Tenga en cuenta que canvas tiene un atributo id, lo que le permite acceder a este elemento HTML desde JavaScript más adelante.

    <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. Con esto se completa nuestra página web. Llegados a este punto, la página web está lista. Puede abrirla en cualquier explorador y asegurarse de que no aparezca ningún error, aunque todavía no hay ninguna experiencia envolvente.

Pasos siguientes

Tutorial siguiente: 2. Preparación de una escena