Cómo construir su primera aplicación de realidad virtual con ViroReact, React Native y Crowdbotics

Cree una aplicación de realidad virtual simple con escenas, texto en 3D y PhotoSphere.

La realidad virtual (VR) es una tecnología inmersiva que tiene la intención de mejorar la experiencia al proporcionar un entorno realista tridimensional para que el individuo se sienta real. Las aplicaciones de esta tecnología son ilimitadas. Encontrará aplicaciones de juego totalmente inmersivas y entretenidas, así como ejemplos de simulaciones de atención médica utilizadas para salvar vidas.

Para los desarrolladores de React Native, esta tecnología es accesible por una plataforma de terceros llamada ViroReact. Esta plataforma permite a los desarrolladores de React Native crear rápidamente aplicaciones AR / VR multiplataforma. ViroReact actualmente es compatible con ARKit, ARCore, VR Cardboard, Gear VR y Daydream. Viro Media

En este tutorial, lo ayudaremos a pasar por el proceso de instalación y configuración junto con eso para crear una pequeña aplicación de realidad virtual y comprender los conceptos básicos detrás de ella.

Visión de conjunto

  • Primeros pasos: configuración e instalación
  • ¿Qué es ViroReact?
  • Construyendo la aplicación
  • Escenas y texto en una aplicación de realidad virtual
  • Agregar un efecto 3D al texto
  • Agregar un PhotoSphere 360
  • Conclusión

Primeros pasos: configuración e instalación

Para comenzar, utilizaremos un proyecto React Native generado por Crowdbotics App Builder. Todo lo que necesita para generar un proyecto con Crowdbotics es el acceso de inicio de sesión mediante su correo electrónico personal o mediante su perfil de Github (recomendado).

Una vez que haya iniciado sesión, en la página Crear aplicación, seleccione React Native template en Mobile App.

Por último, elija el nombre de su plantilla en la parte inferior de esta página y luego haga clic en el botón Crear mi aplicación. Después de unos momentos, se generará su proyecto. Si decidió acceder a través de Github, recibirá una invitación al repositorio de Github generado por el servicio Crowdbotics. Clona el repositorio en tu máquina de desarrollo por ahora.

Para continuar, debe tener lo siguiente ya instalado en su máquina de desarrollo.

  • Node.js
  • vigilante (solo OSX / Linux)
  • Python2, JDK (solo Windows)
  • paquete ngrok instalado como un módulo global
  • reaccionar-nativo-cli
  • reaccionar-viro-cli

Para instalar ambas herramientas de línea de comandos, abra una ventana de terminal y ejecute el siguiente comando.

Después de la instalación, asegúrese de tener la última versión de react-viro-cli que es 2.13.0 al momento de escribir este tutorial. Para verificar la versión instalada, ejecute react-viro-cli --version.

Atraviesa el repositorio clonado de Github. Cuando esté dentro, elimine todo el contenido, excepto los siguientes archivos.

  • directorio .git
  • .gitattributes
  • .gitignore

La razón detrás de esto es que la integración de una aplicación React Native ya existente con Viro React no funciona tan bien como se pretende. Entonces, vamos a tomar un enfoque diferente. Después de eliminar los archivos, use el cli react-viro para crear un nuevo proyecto que tenga soporte de integración por defecto.

Por defecto, react-viro-cli usa hilo para instalar las dependencias del proyecto. Después de este paso, tendrá la estructura de directorios de su proyecto similar a la siguiente.

¿Qué es ViroReact?

ViroReact es una plataforma que te ayuda a construir experiencias de aplicación AR (Realidad Aumentada) y VR (Realidad Virtual). Utiliza ARKit y ARCore para implementar la plataforma de desarrollador para plataformas móviles específicas como iOS y Android. Además de React Native, hay una opción de desarrollo para ambas plataformas nativas proporcionada por ViroCore.

ViroReact API viene con una serie de componentes React personalizados para representar diferentes escenas y objetos en un entorno tridimensional. Lo bueno de ViroReact es que es de código abierto, por lo que no tiene que preocuparse por pagar las tarifas de licencia. Sin embargo, tenga en cuenta que, debido a la limitación de los dispositivos compatibles con ARKit y ARCore, no puede usar una versión de SO extremadamente antigua para iOS o Android.

Configurar la API de Viro y la aplicación Testbed

Viro le proporciona una aplicación de banco de pruebas que se puede instalar en un dispositivo real y probar la aplicación que crea junto con el camino. También contiene algunas muestras de aplicaciones de banco de pruebas que se crean utilizando el núcleo ViroReact.

Para instalar en los dispositivos iOS de la aplicación Viro Media, vaya a la tienda de aplicaciones aquí y para Android, hay una aplicación en la tienda Play aquí. Tenga en cuenta que es un paso obligatorio para continuar.

Para acceder al núcleo de Viro React necesita una clave API. Inicie sesión o cree una nueva cuenta en viromedia.com y obtendrá una clave API en el correo electrónico registrado.

Una vez hecho esto, ejecutemos la aplicación de prueba de muestra predeterminada que viene con cada proyecto de Viro usando su herramienta CLI. Primero, debe agregar la clave API dentro del archivo App.js.

Después de eso, abra una ventana de terminal y ejecute npm start.

Cuando ejecuta un proyecto de Viro, siempre notará en la ventana de terminal que, además de obtener la interfaz react-native-cli que ejecuta Metro bundler y carga el gráfico de dependencia, react-viro-cli utiliza el servicio de paquete ngrok que le proporciona un punto final para que usted pueda ejecutar en la aplicación Viro Media en un dispositivo real. Puede ver el punto final reflejado en la captura de pantalla anterior.

Cuando abra la aplicación, será recibido por la siguiente pantalla.

Luego, haga clic en el icono en la esquina superior izquierda para acceder a la barra de menú.

En la barra de menú, haga clic en Enter Testbed. Luego, ingrese el punto final ngrok generado en la terminal al ejecutar npm start.

Una vez hecho esto, haga clic en el botón Ir y se le pedirá que elija un entorno como el siguiente. Haz clic en VR.

Verá la aplicación preinstalada como se muestra a continuación en acción en su dispositivo.

Construyendo la aplicación

Como todo está en orden, ahora puedes seguir adelante y seguir trabajando en tu aplicación de realidad virtual. Ya ha experimentado una aplicación Hello World que viene preconstruida con la herramienta ViroReact CLI. En esta sección, vamos a editarlo y personalizarlo a nuestra manera para lograr el resultado deseado.

Primero, vamos a eliminar la pantalla donde aparece la opción de elegir un entorno de renderizado para una aplicación de prueba AR o VR. Como solo estamos trabajando en una aplicación VR, permítanos actualizar la función render () dentro del archivo App.js como se muestra a continuación.

El método _getVRNavigator () representa el navegador de escena para la experiencia de realidad virtual. El navegador de escena es el punto de entrada de cualquier aplicación de Viro. Para AR encontrará ViroARSceneNavigator y para VR encontrará ViroVRSceneNavigator. Para que se represente cualquier escena, hay dos accesorios necesarios para este componente: apiKey y initialScene. En el archivo, App.js, verá la escena representada actualmente como a continuación. La parte sharedProps es la apiKey.

Los accesorios initialScene tienen un valor de InitialVRScene. Este valor es en realidad un componente que se muestra inicialmente por el navegador de escenas. En nuestro caso, es el componente HelloWorldScene por ahora.

Escenas y texto en una aplicación de realidad virtual

Las aplicaciones en Viro React consisten en escenas representadas por el componente ViroScene. Cada escena es un equivalente de las Vistas. Para crear una escena básica, todo lo que tiene que hacer es modificar el componente . Abra HelloWorldScene.js. Notará que ViroScene ya se está importando.

A continuación, modifiquemos la función de renderizado. Cree una escena propia basada en texto.

ViroText es un componente que proporciona funcionalidad de texto bidimensional. Utiliza accesorios como el texto en sí, textAlign, fontSize, witdh, position, etc. El estilo del texto se puede hacer usando una fontFamily, pero tenga en cuenta que no todas las plataformas admiten todas las familias de fuentes. También puede usar un objeto de estilo creado con StyleSheet del núcleo React Native. El tamaño del texto se puede aumentar o disminuir utilizando la propiedad fontSize. Vea el resultado del fragmento de código anterior como se muestra a continuación.

Para habilitar el texto en 3D, hay un accesorio llamado extrusionDepth que tiene un valor mayor que cero, habilita el texto en 3D. Agreguemos esta propiedad en el componente ViroText.

Agregar un efecto 3D al texto

Si el valor de extrusionDepth es mayor que cero, puede aplicar tres materiales al texto: frontMaterial, backMaterial y sideMaterial. Agreguemos diferentes colores a estos materiales para ver el efecto. Tendrá que importar ViroMaterials desde react-viro para continuar.

Los materiales son el conjunto de atributos de sombreado que definen la apariencia de las superficies de una geometría cuando se procesan. Para ver esto en acción, eche un vistazo a continuación.

Agregar un PhotoSphere 360

Es posible que haya notado en la aplicación testbed que probamos anteriormente, tenía una imagen de fondo que actuaba como una esfera 360. A menudo encuentra estas imágenes 360 en aplicaciones de realidad virtual. Para agregar uno en nuestra aplicación ahora mismo, descargue cualquier recurso de este enlace y pegue el archivo dentro del directorio nombre_proyecto / js / res /. Estos activos son de uso gratuito.

Para agregar dicha imagen, hay un componente en Viro React API llamado Viro360Image. Puede importarlo desde react-viro.

Este componente utiliza el giroscopio de un dispositivo para mostrar una vista de 360 ​​grados. Agregue el componente dentro de ViroScene como se muestra a continuación y antes de ViroText.

La carga inicial de la imagen puede demorar unos segundos, pero aparecerá en el camino correcto. Vea los resultados a continuación.

Conclusión

ViroReact proporciona un gran conjunto de componentes API que puede usar para ampliar su aplicación de realidad virtual. ¿Notó que nunca tuvimos que reiniciar el paquete ngrok después de realizar cambios en el componente de la aplicación? Aquí es donde radica la ventaja de ViroReact. Espero que disfrutes este tutorial.

El código completo para este tutorial está disponible en el repositorio de Github a continuación.

¿Está creando una aplicación web o móvil?

Crowdbotics es la forma más rápida de construir, lanzar y escalar una aplicación.

¿Desarrollador? Pruebe Crowdbotics App Builder para andamiar e implementar rápidamente aplicaciones con una variedad de marcos populares.

¿Ocupado o no técnico? Únase a cientos de equipos felices que crean software con los PM de Crowdbotics y desarrolladores expertos. Alcance el cronograma y el costo con Crowdbotics Managed App Development de forma gratuita.