Creando una aplicación en Realidad Virtual (VR) y Vista 360° con React VR

Tutoriales

Demo Github

Vamos a construir una aplicación web que va tener un entorno Virtual, es decir en realidad Virtual y podremos tambien mirar los alrededores en una vista de 360° entre otras funcionalidades. Las páginas en Realidad Virtual hacen que el usuario tenga una experiencia diferente. Probablemente sea el futuro de las páginas webs junto con la llamada Web 3.0. En este tutorial aprenderemos a como crear una aplicación básica en Realidad Virtual (VR) con Vista 360°.

Nota: Te aconsejo siempre usar el gestor de linea de comandos de Node JS el NPM – Node Package Manager, para todo este proyecto, es lo más aconsejable según su documentación.

Instalación de Node JS para Gestionar nuestras dependencias

Voy a instalar Node JS para gestionar mis paquetes y dependencias (según la documentación es el que debemos usar, hasta la fecha de creación de este artículo), para ello vamos a su página y  lo descargamos.

Fuente: nodejs.org

Ahora verificamos la versión de Node JS que hemos instalado, con esto compruebo que se ha instalado correctamente Node JS, para ello ejecuto la siguiente instrucción:

Instalación de las dependencias para el Proyecto

Primer instalamos el Gestor de líneas de Comandos React VR CLI, ejecutamos:

Ahora hago el deployment inicial de mi aplicación con el siguiente comando:

Vista previa de mi Proyecto

Vamos a ver nuestro proyecto en el navegador, para ello ingreso al directorio ‘miproyectovr’ que se ha creado durante el deployment inicial y luego inicio el proyecto:

Vamos al navegador e ingresamos a la siguiente dirección para ver nuestro proyecto publicado:

http://localhost:8081/vr/

Personalizando mi proyecto

Ahora a mi proyecto le voy a colocar una imagen equirectangular (Fondo) la cual le da un entorno de realidad virtual a 360°, agregare un letrero de bienvenida, 3 botones y un video, podemos ver la imagen a continuación:

Fuente: collectivecloudperu.com

Gestionando la imagen de Fondo y demás archivos

Para modificar la imagen que viene por defecto en mi proyecto ingreso a la carpeta llamada ‘static_assets’ aquí debo de agregar el fondo del proyecto, una imagen equirectangular, asimismo voy a tener que colocar todos mis archivos multimedia y otros que creamos que deban de verse públicamente en este directorio, este directorio es como la carpeta publica por default en React VR.

Yo agregare mis archivos:

  • bj.jpg
  • sonido.mp3
  • video.mp4

Son los archivos que usare en este proyecto.

Agregando el código

Primero importare las dependencias necesarias para este proyecto:

Con la siguiente función le digo que me cargue el video automáticamente y sin silenciar el audio:

Creo el letrero de bienvenida:

Muestro el video en formato MP4:

Crea el botón para que al hacer click nos envíe a una determinada URL que le especifiquemos:

Bien también React VR nos da la posibilidad de agregar figuras Geométricas y otros elementos, yo agregare una caja y un cilindro:

Puedes agregar más elementos solo revisa la documentación oficial de React VR con paciencia y mesura.

Código completo

Compilando nuestro proyecto

Ejecutamos el siguiente comando para compilar nuestro proyecto:

Nos crea carpeta llamada ‘vr’ que contiene los archivos de nuestro proyecto.

Asimismo estos proyectos se pueden ver también en dispositivos móviles y lentes de realidad virtual increíble cierto ?

Bien eso es todo espero que les sirva de mucho y puedan implementar React VR en sus proyectos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required