Configurado su entorno de desarrollo

2 minutos

Para empezar a compilar este proyecto, primero debe configurarlo. Puede crear un proyecto de WebXR con Babylon.js simplemente usando JavaScript, HTML y CSS. Aun así, en este módulo usaremos WebPack, Node.js y TypeScript. Esto nos permite mejorar la arquitectura del proyecto, la seguridad de tipos y el potencial de crecimiento.

Dos opciones

Hay dos maneras de continuar con este módulo, aunque las dos le llevarán al mismo lugar. En el módulo, le orientaremos a lo largo del proceso de dividir una experiencia de XR en unidades que se pueden probar.

Opción 1: Crear la experiencia de XR de Space Jam: Nuevas leyendas mediante una plantilla de GitHub

Con esta opción, usará CodeTour en Visual Studio Code para explorar una versión casi completa y agregar su propia personalización.

Para empezar, cree un repositorio de GitHub para esta aplicación. Vaya a la página para crear un repositorio basado en la plantilla y rellene el formulario. Asigne el nombre space-jam-a-new-legacy-babylonjs al repositorio. Puede hacer que el repositorio sea público o privado, pero no olvide incluir todas las ramas.

Screenshot that shows creating a repository for the project by using the GitHub template, for a completed experience.

Opción 2: Crear una experiencia simple de XR con Babylon.js mediante una plantilla de GitHub

Con esta opción, comenzará con un proyecto simple de Babylon.js y escribirá todo el código después de este módulo.

Screenshot that shows creating a repository for the project by using the GitHub template, for a plain experience.

Clonación del repositorio con Visual Studio Code

Nota

Es posible que se le pida que inicie sesión en GitHub en los pasos restantes de esta unidad. Si es así, siga las instrucciones para autorizar el acceso de Visual Studio Code a este repositorio específico. Esta autorización es necesaria para completar el módulo.

Una vez que se ha creado el repositorio, clónelo mediante Visual Studio Code (es decir, haga una copia en el equipo local).

Abra una nueva ventana de Visual Studio Code. Para ello, seleccione Archivo>Nueva ventana.
Abra la paleta de comandos mediante la combinación de teclas CTRL+Mayús+P y escriba Git: Clone.
En GitHub.com, en el repositorio space-jam-a-new-legacy-babylonjs, seleccione el botón Clone (Clonar) y copie la dirección URL HTTPS.
En Visual Studio Code, pegue la dirección URL que copió en el símbolo del sistema y presione la tecla ENTRAR. Si se le pide, elija una ubicación para descargar el código. También si se le pide, elija abrir el código en la ventana actual.

Compilación y ejecución del proyecto de inicio

Tanto si usa la plantilla de proyecto completada de GitHub como si opta por la plantilla de proyecto simple de Babylon.js, asegúrese de que tiene todos los paquetes instalados y las compilaciones de proyecto.

Como estamos usando Node.js, los paquetes necesarios se definen en un archivo packages.json. Ejecute los comandos siguientes para instalar los paquetes, ejecutar la compilación e iniciar el proyecto.

Abra el terminal en Visual Studio Code.
Escriba el comando siguiente para instalar los paquetes:

npm install
Escriba el comando siguiente para ejecutar la compilación:

npm run build
Escriba el comando siguiente para iniciar el proyecto:

npm start
Ir a http://localhost:8080/.

Si antes eligió la opción 1, debería ver la escena siguiente.

Si eligió la opción 2, debería ver la escena siguiente.

Con estas escenas básicas, ya está listo para empezar a representar la experiencia de Mixed Reality.

Continuar