Video Summary and Transcription
La charla proporciona una introducción a React 360, un marco de JavaScript creado por Facebook para construir interfaces de usuario 3D y VR sobre React. Simplifica la creación de UI complejas y aprovecha los conceptos y herramientas familiares de React y React Native. La estructura de carpetas incluye una carpeta de activos estáticos para archivos multimedia, un archivo client.js para crear ubicaciones y superficies, y un archivo index como archivo principal. La estructura de código es similar a React Native y React, utilizando Flexbox para el estilo. La aplicación se puede ejecutar en un navegador web o cualquier dispositivo de realidad virtual, e incluye características como diapositivas, capa de video e imagen de fondo personalizable.
1. Introducción a React 360
Soy Eugene Ghaoui, desarrollador de VR móvil y web y fundador de IO. Hoy hablaré sobre realidad virtual con React y cómo crear nuevas experiencias de VR utilizando el framework React 360. React 360 es un framework de JavaScript creado por Facebook para construir interfaces de usuario en 3D y VR sobre React. Simplifica la creación de UI complejas y aprovecha los conceptos y herramientas familiares de React y React Native. Para comenzar, instala React 360 CLI a través de npm, inicializa un nuevo proyecto y ejecuta npm start. La estructura de carpetas incluye una carpeta de activos estáticos para archivos multimedia, un archivo client.js para crear ubicaciones y superficies, y un archivo index como archivo principal. Las superficies son cruciales en VR para renderizar componentes de UI 2D, con opciones para superficies cilíndricas o planas. Las ubicaciones se utilizan para renderizar componentes de UI 3D utilizando coordenadas cartesianas. Para agregar objetos 3D, importa la entidad de entity y utiliza la luz ambiental para la intensidad de la luz. Ejecuta la aplicación en un navegador web o cualquier dispositivo de VR escaneando el código QR. La estructura del código es similar a React Native y React, utilizando Flexbox para el estilo. El archivo client contiene superficies con raíces especificadas, y el archivo index incluye el registro de la aplicación y el nombre de la clase. Los objetos 3D se pueden renderizar utilizando la clase Model y el objeto entity con activos y texturas. Ejecuta la aplicación en localhost para acceder a la aplicación React 360 con diapositivas, capa de video e imagen de fondo personalizable. Si tienes más preguntas o necesitas ayuda, no dudes en contactarme en Twitter, GitHub, Facebook o correo electrónico. Gracias por ver y espero que hayas disfrutado la charla.
Como sabes, hablaré sobre realidad virtual con React y cómo podemos crear nuevas experiencias de VR utilizando el framework React 360 y ejecutarlo en nuestro navegador web y en todos los dispositivos de VR.
Para comenzar, ¿qué es React 360? React 360 es un framework de JavaScript creado por Facebook para la creación de interfaces de usuario en 3D y VR construidas sobre React. Esta biblioteca está diseñada para simplificar la creación de UI complejas. Y como sabes, React 360 nos permite utilizar los conceptos y herramientas familiares de React y React Native.
Para comenzar, todo lo que tienes que hacer es instalar el React 360 CLI a través de npm, luego inicializar un nuevo proyecto y hacer un npm start para asegurarte de que todo esté funcionando correctamente y tendrás tu proyecto predeterminado en tu navegador web.
En cuanto a la estructura de carpetas, tenemos la carpeta de activos estáticos, que contiene nuestros archivos de objetos 3D y los archivos de materiales, sonidos, imágenes, videos, todos los archivos multimedia deben estar aquí, Tenemos el archivo client.js y aquí creamos nuestras ubicaciones y superficies, y tenemos el archivo index, que es nuestro archivo principal.
En cuanto a los componentes, tenemos cuatro componentes principales, primero las vistas que son como divs, y el componente de texto, y el componente de imagen y el botón de VR, que es un botón normal pero en VR. Lo más importante en VR son las superficies. Utilizamos superficies para renderizar los componentes de UI 2D, y tenemos dos tipos de superficies, una superficie cilíndrica y una superficie plana, tenemos dos ángulos, el ángulo amarillo y el ángulo de inclinación, y cada superficie debe tener un ancho y alto que debe ser proporcionado por el desarrollador. En cuanto a la ubicación, las ubicaciones se utilizan para renderizar componentes de UI 3D, y utilizamos las coordenadas cartesianas x, y y z, y al final creamos una nueva ruta que ayudará al desarrollador a conectar nuestra superficie al registro superior en el archivo index.
Como puedes ver aquí, tenemos el eje z y aquí, si z es negativo, el objeto estará en la parte frontal, si z es positivo, el objeto estará en la parte posterior y tenemos el x para el ángulo de inclinación y el y para el ángulo de guiñada. Aquí tienes un ejemplo, así que aquí nos gustaría agregar un objeto 3D a nuestra aplicación de VR. Todo lo que tenemos que hacer es importar la entidad de entity. Entity se utiliza para renderizar los objetos 3D en React 360. Aquí utilizamos, si quieres, puedes usar la luz ambiental para la intensidad de la luz y utilizamos la fuente para dar el enlace a nuestro objeto. Aquí nuestro objeto tiene dos extensiones, el objeto y el material. Queremos usarlo para el renderizado y podemos darle estilo como puedes ver aquí. Tenemos transformaciones y muchas opciones para estilizar nuestro objeto 3D. Si quieres ejecutar esta aplicación en tu navegador web, solo escanea el siguiente código QR y tendrás esta aplicación en tu teléfono o en tu navegador web en la computadora, en cualquier dispositivo de VR. Ahora pasaremos al código. Veamos qué tenemos. Esto es lo que parece. Es similar a React Native y React como puedes ver aquí. Utilizamos Flexbox para el estilo y tenemos el archivo client. Como puedes ver aquí, tenemos una nueva superficie y le damos una raíz, que es una raíz de diapositivas y si vas al archivo index, verás aquí tenemos el registro de la aplicación con la raíz de diapositivas y el nombre de la clase que es Slides. Y para los objetos 3D, tenemos una clase Model, una clase Model y como puedes ver aquí, tenemos el objeto entity con un activo que es un auto Porsche y le damos una textura, que es una imagen predeterminada que tenemos aquí. Así que ejecutémoslo en nuestro navegador web, solo haz local host y ejecútalo y espera hasta que se actualice y aquí estamos en nuestra aplicación React 360. Como puedes ver aquí, tenemos las diapositivas y podemos cambiar entre ellas. Tenemos la capa de video y podemos cambiar nuestra imagen de fondo.
Creo que eso es todo lo que necesitas saber sobre React 360 para comenzar. Para más preguntas o ayuda, contáctame en Twitter, GitHub, Facebook, correo electrónico y gracias por ver. Espero que hayas disfrutado la charla y gracias por todo. ¡Adiós!
Comments