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

5 minuto(s)

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 en Realidad Virtual (VR) y Vista 360° con React VR. 

NOTA: La herramienta que usamos para este tutorial React VR, ahora se llama React 360, en donde han cambiado muchas cosas, pero este tutorial aún funciona y te permite crear aplicaciones con React VR.

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 e instalamos 

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:


Si necesitas una guía más detallada sobre Node JS, te recomiendo leer el artículo Que es y Como instalar Node JS

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:

https://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: nubecolectiva.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 ?

Notas

  • Algunos de los pasos mencionados pueden variar en futuras versiones de React VR, esto no depende de nosotros si no de los desarrolladores que dan soporte a React VR que cambian el orden de las opciones mencionadas, también suelen quitar o agregar nuevas funciones.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.