Creando juegos en React

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Esta charla tratará sobre react-three-fiber. Vamos a crear un mini juego juntos. Veremos cómo incluso los principiantes pueden superar todo el código boilerplate y las matemáticas sin volverse locos, y luego traducirlo a cualquier cosa, ya sea un juego o un sitio web con efectos visuales interesantes.

This talk has been presented at JSNation Live 2020, check out the latest edition of this JavaScript Conference.

FAQ

Paulo Henschel es un desarrollador de Alemania.

React 3.0 Fiber es una biblioteca creada por Paulo Henschel, actúa como un reconciliador o envoltorio para three.js, facilitando la creación de gráficos 3D en aplicaciones React.

React 3.0 Fiber puede utilizarse para desarrollar juegos, interfaces de usuario frontend y cualquier proyecto que implique gráficos 3D, ofreciendo una nueva forma de expresión y la posibilidad de integrar mensajes y narrativas complejas.

Es recomendable revisar la sección de fundamentos en el repositorio de React 3.0 Fiber, donde encontrarás documentación básica y ejemplos para entender mejor cómo utilizar la biblioteca.

Bureli es una plataforma CAD incrustable y abierta para la web, de la cual proviene React 3.0 Fiber. Bureli necesitaba algo para hacer más 'Reactivo' el control de las escenas, lo cual llevó al desarrollo de React 3.0 Fiber.

Para integrar física en proyectos que usan React 3.0 Fiber, se recomienda usar Canon.js, una biblioteca que facilita el manejo de la física y está disponible en la organización de GitHub de React Spring.

Para hacer interactivo un objeto en React 3.0 Fiber, puedes utilizar hooks como useFrame para animar objetos y gestionar interacciones basadas en eventos del usuario, como movimientos del ratón.

Paul Henschel
Paul Henschel
30 min
18 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla proporciona una introducción al desarrollo de juegos en React utilizando React 3.0 Fiber y three.js. Cubre temas como la creación de objetos 3D, la comprensión de mallas e iluminación, la adición de interactividad y física, el control de objetos con entrada de mouse y la creación de enemigos. El orador enfatiza la facilidad y potencia de React 3.0 Fiber para el desarrollo de juegos y fomenta la experimentación y el aprendizaje a través de ejemplos y recursos.
Available in English: Making Games in React

1. Introducción al Desarrollo de Juegos en React

Short description:

Hoy les mostraré cómo hacer juegos en React. Les brinda una nueva herramienta para expresarse y abre nuevas puertas para hacer cosas que antes no hubieran sido posibles.

Hola, mi nombre es Paulo Henschel. Gracias por recibirme. Soy un desarrollador de Alemania. Y esta es mi cuenta de Twitter. Pueden echarle un vistazo. Esto no es una o, es un cero. Y hoy les mostraré cómo hacer juegos en React. Supongo que muchos de ustedes se preguntarán por qué diablos haría un juego en React. La cosa es que simplemente te brinda una nueva herramienta para expresarte. Así que podría ser un juego, podría ser frontend, podría ser cualquier cosa, realmente. Entonces tal vez tengas una historia para compartir, mensajes políticos, lo que sea. Esto simplemente te ayuda a abrir nuevas puertas, a hacer cosas que antes no hubieran sido posibles.

2. Introducción a React 3.0 Fiber

Short description:

Hoy les mostraré cómo usar React 3.0 Fiber, una biblioteca que creé como un reconciliador o envoltorio para three.js. Surgió de Bureli, una plataforma CAD incrustable y abierta para la web. Necesitábamos algo para hacerlo más Reactivo y controlar la escena de manera más efectiva. Esto es muy específico y excelente para crear modelos y configuradores de variantes. Les mostraré cómo usarlo desde la perspectiva de un principiante.

Lo que vamos a usar se llama React 3.0 Fiber. Esta es una biblioteca que creé una vez. Es un reconciliador o envoltorio, como quieras llamarlo, para three.js. Y aquí puedes ver algunas demos impresionantes. De donde proviene se llama Bureli, B-U-E-R-E-L-I.io, puedes echarle un vistazo aquí. Esto es lo que estamos haciendo en el trabajo, y de ahí proviene. Básicamente es una plataforma CAD incrustable y abierta para la web. Y solo necesitábamos algo para hacerlo más Reactivo, para controlar la escena de una manera mejor. Y esto es muy específico. Puedes crear modelos con él, configuradores de variantes, visualmente o headless. Pero lo que les mostraré hoy tiene más que ver con la biblioteca en sí, React 3.0 Fiber, y cómo pueden usarlo, y todo desde la perspectiva de un principiante porque eso es lo que soy. Nunca antes había hecho juegos, pero si puedes hacer algo como esto, supongo que puedes hacer cualquier cosa, al menos tienes las bases de partida.

3. Introducción al desarrollo del juego Arcanoid

Short description:

Primero, ve al repositorio y revisa la sección de fundamentos. Hoy, vamos a hacer un pequeño juego llamado Arcanoid. Explicaremos cómo funciona el espacio 3D, los ejes, la cámara y el área visible. Proyectaremos objetos primitivos como la paleta y la pelota de ping-pong. Utilizaremos el lienzo de React 3.0 Fiber.

Primero, te pediría que vayas a este repositorio y revises la sección de fundamentos. Aquí encontrarás tus bases de partida, documentación y cosas así, solo para tener una idea de cómo todo se está uniendo. Hoy no profundizaré demasiado, pero estamos aprendiendo haciendo. Y obviamente, también necesitas 3.js junto con la documentación, porque las cosas que voy a hacer hoy, no voy a explicar cómo las maneja 3.js, y así sucesivamente.

Así que, vamos directo al grano. Lo que estamos haciendo hoy es, creo que se llama Arcanoid. Es como un pequeño juego que vamos a hacer. La paleta, creo, no se puede ver debido a las pantallas video, pero de todos modos. Hoy haremos una versión muy reducida de esto. Así que, sí, empecemos.

Lo primero que voy a explicarte es cómo funciona el espacio 3D. Tienes tres ejes. El eje X es horizontal. Y es vertical. Y luego tienes la profundidad. Así es como funciona el espacio 3D. 3D es tridimensional. Luego tienes una cámara. Está mirando hacia el área que es visible. Y crea algo que se llama un frustum o un viewport. Es un área visible de nuestra pantalla. Y en esto, vamos a proyectar un par de objetos primitivos. Uno será la paleta. Lo vincularemos a nuestro mouse para hacerlo interactivo. Y el otro será esta pequeña pelota de ping-pong. La haremos gravitar hacia abajo. Así que, también estamos trabajando con física. Así que, vamos directo al grano.

Lo primero, y esto puede ser lo más importante que obtienes de React 3.0 Fiber, se llama Canvas. Básicamente, es una representación del contexto WebGL.

4. Comprendiendo Mallas e Iluminación en 3.js

Short description:

En 3.js, una malla es una representación de una forma que también describe cómo se ve la forma. Para hacer visible la forma, necesitamos darle un material. El material estándar de malla es un material recomendado para principiantes. Puede recibir un color, que afecta cómo aparece la forma. La iluminación es importante en la escena, al igual que en la fotografía. La luz ambiental proviene de todas partes, lo que resulta en una apariencia plana. Para crear sombras, necesitamos una fuente de luz principal, como una luz puntual posicionada en una dirección específica.

Todo lo que sucede aquí es visible. En 3.js, tienes varias cosas que puedes hacer. La más importante se llama malla. Y, si guardo esto, no pasará nada. No verás nada. Porque una malla es una representación de una forma, y también tiene que describir cómo se ve la forma.

La forma podría ser, por ejemplo, una esfera. Ahora tenemos una esfera. Si guardo esto, la vemos. Pero está de color blanco, porque también necesitamos darle un material. Hay muchos materiales, pero el que siempre uso, y te sugiero que uses como principiante, se llama material estándar de malla. Este puede recibir un color. Oops, color. Digamos rosa fuerte. Si guardo esto, se pondrá negro, y esto es porque no recibe ninguna luz. Si alguna vez has estado en la fotografía, es el mismo principio, realmente. Las cosas son afectadas por la luz dentro de la escena. Si sabes qué es, por ejemplo, luz de campo, luz de tira o luz principal, estás bien. Si no sabes qué es esto, no te rompas la cabeza. Puedes improvisar, puedes probar cosas.

Al principio estamos en luz ambiental. Eso significa que la luz viene de todas partes. Esta esfera se ve bastante extraña. Es plana. Es lo mismo que en la fotografía. Si la luz viene desde todos los ángulos, no hay sombra. Entonces, necesitamos una luz principal, una fuente de luz que esté un poco inclinada. Y pongamos una luz puntual en la escena así. La posicionamos. Digamos, arriba a la derecha.

5. Sombreado, Iluminación y Reutilización en React

Short description:

Ahora exploremos las técnicas de sombreado e iluminación. Podemos ajustar la intensidad de la luz ambiental y crear un efecto de luz de tira. Para que los objetos sean más suaves, podemos usar argumentos de constructor como radio y segmentos. React no se limita a la web; puede manejar varios elementos, incluyendo mallas y luces puntuales. Ahora podemos crear componentes reutilizables, como una pelota de ping pong, utilizando propiedades.

Y ahora puedes ver un poco de sombreado en acción. Vamos a hacer que la luz ambiental sea menos intensa. Así. Y ahora puedes verlo de una mejor manera. Además, hay un truco que siempre uso. Se llama luz de tira. Nuevamente, esto es como fotografía básica. Entonces, ahora es la luz que viene desde atrás. Y crea este pequeño borde.

Esta esfera se ve bastante áspera en 3js. Entonces, si haces una esfera u cualquier objeto, tienes algo llamado arcos o argumentos de constructor. El primero es el radio. Y el otro es segmentos, como qué tan suave se verá esta cosa, como puedes ver. Estos son los conceptos básicos. Ahora sabemos cómo colocar cosas en la escena. Ahora sabemos cómo agregar luces.

Y es posible que te preguntes, esto se ve bastante extraño porque estos no son diffs y spans. Estos son mallas y luces puntuales, y así sucesivamente. Entonces, no pienses en React como algo que solo es para el DOM, para la web. React es un estándar de componente multiplataforma. Puede manejar de todo. Aquí estamos colocando elementos de three JS en la escena. Debido a que esto es React, ahora podemos extraerlo y crear componentes, componentes reutilizables. Entonces, hemos creado una pelota. Esta será nuestra pelota de ping pong. Coloquémosla aquí y de vuelta en la escena. Y ahí vamos. Nada debería cambiar. Pero ahora lo hemos hecho reutilizable. Lo primero que podemos hacer es usar propiedades como esta.

6. Añadiendo Interactividad y Física con Canon.js

Short description:

Ahora necesitamos tener nuestro pedal. También lo llamaremos pedal. Tenemos dos componentes, la pelota de ping pong y el pedal. Y ahora necesitamos hacerlos interactivos y reaccionar a dos físicas básicamente. La física es muy, muy compleja y hay muchas bibliotecas entre las que puedes elegir. Por ahora, usaremos Canon.js. Se llama useCanon y podría ser la forma más fácil que hayas visto para hacer posible la física.

Ahora, si quisiera, podría entrar aquí y darle un tamaño diferente, un radio diferente. Lo que sea. Supongo que estamos bien. El combo rosa debería ser blanco y tal vez no debería ser tan grande como esto. Eso se ve bien.

Ahora necesitamos tener nuestro pedal. También lo llamaremos pedal. He copiado el componente. Este toma diferentes argumentos. Queremos tener un rectángulo o una caja como esta. Tampoco debería ser una esfera, debería ser una caja de búfer y geometría. Si guardo esto... Ups, necesito ponerlo en esta cosa. Pedal, y sí, eso se ve bien. Pongámoslo aquí abajo.

Ahora tengo el pedal pero no quiero una caja. Quiero algo como un rectángulo estirado. Uno como este. Démosle otro color, digamos azul claro. Bien, estamos bien. Tenemos dos componentes, la pelota de ping pong y el pedal. Y ahora necesitamos hacerlos interactivos y reaccionar a dos físicas básicamente. Así que esto es lo siguiente que debemos hacer. La física es muy, muy compleja y hay muchas bibliotecas entre las que puedes elegir. MLJS, Canon.JS, y así sucesivamente. Por ahora, usaremos Canon.js. Es una biblioteca que hemos creado. Está en la organización de Github de React Spring. Se llama useCanon y podría ser la forma más fácil que hayas visto para hacer posible la física y te lo mostraré. Vamos a agregarlo.

7. Física e Interacción de Objetos

Short description:

Ahora tenemos física y podemos hacer que los objetos se comporten de manera física. Usando hooks, podemos describir la geometría de los objetos y darles propiedades como masa y gravedad. Podemos vincular estos hooks a nuestros objetos y ver cómo interactúan en la escena. Ajustando el valor de gravedad, podemos controlar la velocidad y dirección de los movimientos de los objetos.

Física, digamos proveedor así. Ahora tenemos física. ¿Y puedo hacer esto? Esto realmente es malo. Bien, lo pongo aquí. Nos salvé, no pasa nada porque necesito decirle al mundo de la física acerca de estos objetos que he puesto en la escena. Y la forma más fácil de hacer esto, esta biblioteca nos proporciona un par de hooks y los consideran como una aproximación. Hemos creado una esfera. Ahí está la pequeña cosa blanca que puedes ver aquí y necesitamos decirle al mundo de la física que esto es una esfera y obtenemos un par de hooks que describen cómo se ve la geometría y funcionan de la misma manera. Tenemos el hook aquí. El hook quiere tener arcos, los mismos. Entonces, en este caso, quiere saber el radio y para comportarse de manera física, un objeto necesita tener masa. Así que decimos masa uno y todo lo que necesitamos hacer es vincularlo a nuestro objeto, obtenemos una referencia, lo colocamos en la malla, ref. Puedo guardarlo y como puedes ver, está cayendo. Así que la física está funcionando. Lo que sucede es que es demasiado lento. Así que deberíamos darle un poco más de gravedad, hay una propiedad aquí que dice gravedad y tiene tres ejes. Recuerda que tienes tres ejes en el espacio y queremos que la gravedad caiga hacia abajo, como desde el eje Y hacia arriba son valores positivos, hacia abajo son valores negativos. Así que pongamos por ejemplo menos 30 y eso debería verse mejor. Sí, eso se ve mucho mejor.

8. Controlando el Pedal con el Ratón

Short description:

Lo siguiente es el pedal. Usamos el hook useBox para controlarlo con nuestro ratón. La API nos permite interactuar con objetos, aplicar fuerzas y posicionarlos. El hook useFrame es crucial para la animación y se ejecuta 60 veces por segundo. Accediendo al modelo de estado, podemos utilizar los datos del ratón para mover el objeto hacia la izquierda y hacia la derecha.

Lo siguiente es el pedal. No ocurre nada aquí porque solo la pelota es reconocida en el mundo de la física. Hay otro hook para esto. El mismo principio, es una aproximación. Así que se llama useBox. Esta vez no le damos el ratón porque queremos controlarlo con nuestro ratón. Ese es el principio básico detrás de esto, pero también toma los mismos argumentos que tu caja tomó. Así que si hago esto, y lo mismo, necesito vincularlo a nuestra malla así así y no ocurre nada porque estos dos ocupan el mismo espacio. Así que hay algo más que se llama API. Y con esta API, puedes poner, puedes actuar sobre ella, ponerle una fuerza, ponerla en un lugar específico, y así sucesivamente. Normalmente posicionarías objetos aquí como te he mostrado con la luz, sí, puedes, puedes hacer una posición y luego debería ser izquierda y derecha así. Pero en nuestro caso, no es así porque la física controla esta malla. Así que necesitamos encontrar una forma diferente. Y hay un hook llamado useFrame en React3 Fiber. Y este es el más importante de todos. Básicamente se ejecuta 60 veces por segundo. Suscribe este componente al bucle de fotogramas. Eso es lo que hace. Así que ten cuidado. Todo lo que pongas aquí no debe ser costoso pero puedes animar el objeto allí.

Y lo que vamos a hacer es tomar la API. También tiene una posición. Tiene un conjunto donde podemos poner las tres X y useFrame nos da un modelo de estado. El modelo de estado contiene muchas cosas útiles como qué tan grande es la ventana gráfica, la capacidad de respuesta pero también tiene datos del ratón. Así que podemos ir aquí, estado ratón X. Y si guardo esto, debería poder moverme hacia la izquierda y hacia la derecha. Lo que sucede es que esto no hace mucho porque estas son coordenadas normalizadas del ratón son cero en el centro. Si voy hacia la derecha, es uno. Si voy hacia la izquierda, es menos uno. Así que todo lo que necesito saber es qué tan grande, qué ancho tiene mi ventana gráfica.

9. Bouncing the Ball and Increasing Bounce

Short description:

Ahora sigue al ratón y todo lo que necesito hacer es ponerlo abajo. La restitución es qué tan fuerte es el rebote. En este momento, no tiene restitución en absoluto. Así que hay algo llamado material de contacto predeterminado. Aquí puedo describir cómo funciona el material en el mundo físico. Y ahora, puedes ver que la pelota está rebotando. Y no solo eso, el rebote está aumentando.

Así que digo ancho del área de visualización dividido por dos. Y eso es todo. Ahora sigue al ratón y todo lo que necesito hacer es ponerlo abajo. Así que eso es menos el ancho del área de visualización y dividido por dos. Y ahora está aquí. Y como puedes ver, ya está funcionando. Atrapa la pequeña esfera. Y si me muevo hacia abajo, se va. Pero queríamos que rebote. Así que hay algo en la física. Me he quedado dormido en la escuela de física en las clases. Quiero decir, pero la propiedad se llama restitución. La restitución es qué tan fuerte es el rebote. En este momento, no tiene restitución en absoluto. Así que hay algo llamado material de contacto predeterminado. Aquí puedo describir cómo funciona el material en el mundo físico. Así que digo restitución, le doy un poco más de 1. Y ahora, puedes ver que la pelota está rebotando. Y no solo eso, el rebote está aumentando.

10. Resetting the Ball with a Contact Plane

Short description:

Necesitamos algo para reiniciar, para volver a aparecer la pelota. La forma más fácil sería un plano de contacto, un objeto físico que no necesita una representación visual. Se supone que debe atrapar la pelota. Le damos un objeto y lo rotamos para que se convierta en una base o una superficie. También lo posicionamos en la parte inferior y usamos el gancho useFrame para obtener el tamaño de la ventana de visualización.

Se ha incrementado. Lo siguiente que notamos es que la pelota cae. Y el juego está básicamente muerto. Así que necesitamos algo para reiniciar, para volver a aparecer la pelota. Y para esto, hay algo, hay muchas formas en que podríamos hacerlo. Pero la más fácil sería un plano de contacto. Ponemos un objeto físico. No necesita una representación visual. Y se supone que debe atrapar la pelota. Así que decimos usePlane, le damos un objeto de nuevo. Este tampoco tiene masa. Permanece fijo. Y necesitamos rotarlo. La razón de esto es porque si colocamos una malla o un plano en la escena, aparecerá así. Y necesitamos rotarlo para que se convierta, digamos, en una base o una superficie. Así que decimos rotación. Esto va a ser math pi. Es una rotación por dos, así que lo rotamos a la mitad. Y eso debería ser todo. Y también, ahora necesitamos bajarlo un poco. Debe estar en la parte inferior. Esto es en el eje y. Y ahora necesitamos conocer el tamaño de la ventana de visualización. ¿Qué tan grande es la ventana de visualización? Hay otro gancho muy importante. Se llama useFrame. Este nos da la ventana de visualización. No, use3. Aquí, esto es responsive. Entonces, cada vez que el usuario cambia el tamaño de la pantalla, este componente se volverá a renderizar. Así que solo pongámoslo aquí.

11. Respawnear la Pelota y Juego Limitado

Short description:

La pelota puede ser respawnada usando el gancho onCollide y restableciendo su posición y velocidad. Además, se puede agregar una pequeña velocidad hacia arriba para crear un efecto de rebote. Sin embargo, el juego aún está limitado ya que solo permite que la pelota rebote hacia arriba y hacia abajo.

Altura del viewport. Y debería estar debajo. Y si todo está funcionando, entonces ya debería estar bien. Así que veamos. Sí. OK. Así que vemos que tenemos este plano físico allá abajo. Pero el problema es que está haciendo rebotar la pelota hacia arriba. Pero no queremos eso. Queremos respawnear la pelota. Así que eso también es fácil. Estos ganchos, tienen algo llamado onCollide. Así que cada vez que son golpeados, se nos llama de vuelta. Y todo lo que necesitamos hacer, obtenemos la API de esta pelota. Y simplemente la reseteamos. Reseteamos su posición a cero. Así que probemos esto. Funciona. Pero mantiene su velocidad. Así que también necesitamos restablecer la velocidad. Es lo mismo. Velocidad. Y ahí está. Ahora respawneará. En realidad podríamos darle un poco de velocidad hacia arriba. Entonces puedes ver que rebota un poco hacia arriba. Y estos son los elementos básicos de nuestro juego. La cosa es que no hace mucho, porque la cosa solo puede rebotar hacia arriba y hacia abajo.

12. Añadiendo Rotación y Enemigos

Short description:

Vamos a angilar el pedal y añadir rotación. Al multiplicar el estado del ratón x con un ángulo, podemos lograr el efecto deseado. Podemos elegir añadir paredes invisibles o añadir enemigos en su lugar. La función Enemy se puede utilizar para crear enemigos con diferentes colores y posiciones.

Así que vamos a angilar un poco el pedal. Hacemos esto en el componente del pedal. Ya tenemos una línea de código para la posición para que siga al ratón. Ahora añadimos otra para la rotación, así. Establecido. Y de nuevo, la cámara viene del eje x, no, del eje z. Así que necesitamos rotarla alrededor de este eje. Es este. Si solo decimos ratón, no, estado del ratón x, esta vez lo multiplicamos con un ángulo porque la rotación toma un ángulo. Si tomamos una fracción de esto, digamos 5. Y lo que sucede es que esto ya está cerca de ellos. Puedes ver que tienes que interactuar con él. Necesitas tener cuidado.

Así que hay un par de cosas que podríamos hacer ahora. No quiero estirarlo. Esto debería ser un ejemplo muy reducido, nada más. Podríamos poner paredes invisibles en los lados para que esto rebote. Pero no hagamos esto. Simplemente añadamos un par de enemigos. Y supongo que hemos terminado. Así que hago una función llamada Enemy. Y copio todo dentro del panel, así. Pero esta vez, también le doy props. Tomemos un color y el resto de las props. Y propaguemos las props aquí y conectemos el color aquí. Así que ahora, el desarrollador puede poner enemigos. Creo uno. Digo color, naranja. Y démosle una posición. Así.

13. Creando y Personalizando Enemigos

Short description:

Vamos a crear enemigos en nuestro juego y personalizar su apariencia y posición. Podemos colocar varios enemigos en la escena y observar su capacidad de respuesta. Estos simples pasos demuestran que el desarrollo de juegos en React no es difícil y se puede lograr con solo unas pocas líneas de código. Si estás interesado, puedes encontrar un ejemplo más complejo en mi página de GitHub. No dudes en contactarme en Twitter si creas algo genial.

Vamos a darle 0. Entonces, ¿dónde queremos colocarlo? Movámoslo un poco hacia arriba. Y en el lado izquierdo, arcs no está definido. OK. Uno. Estos son ancho, longitud, altura, como expliqué antes. Ah. Este se me olvidó copiarlo. OK. Ahora debería funcionar. OK, ahí está nuestro enemigo. Y como puedes ver, también responde. Puedo golpearlo. Y puedo poner muchos de ellos dentro de la escena. Hagamos otro. Hagamos que este sea de color rosa fuerte. Colócalo en el otro lado y un poco más alto. Y ahí lo tenemos. Tal vez aún más alto así. Estos son los elementos básicos de nuestra aplicación. No voy a ir más allá de esto, porque estamos acortando el tiempo. Lo que quería mostrarte con esto es que todas estas cosas no son difíciles. Como puedes ver, solo usamos alrededor de 60 líneas. Y no necesitas mucha matemática. Puedes improvisar. Puedes probar cosas. Y lo más importante es que te diviertas. Así que si te interesa, puedes encontrar el ejemplo real, el más complejo, en mi página de GitHub. También subiré la versión reducida. Y sí, si haces algo genial, ya sea un juego o cualquier cosa, asegúrate de mencionarme en Twitter.

14. Introducción y Agradecimiento

Short description:

Me encantaría ver sus preguntas. Y espero que se hayan divertido aprendiendo un poco sobre WebGL, gráficos, 3DJS, React 3 Fiber, en React. Y eso es básicamente todo. Gracias nuevamente por tenerme, diviértanse. Y adiós. Hola Paul. Hola. Gracias por unirte a nosotros en esta increíble demostración. Debo decir que solía trabajar en una empresa de publicidad desarrollando anuncios. Y una vez estuve en un equipo que construyó un juego 3D con 3S, si recuerdo correctamente. Han pasado seis o siete años, así que perdónenme si me equivoco. Y eso no se veía tan fácil en absoluto. No estuve involucrado en una parte 3D que se viera tan fácil como tú lo haces ver. Lo haces ver, bueno, como, bueno, 60 líneas y construyes este pedal de pelota rebotante, comienzo de Space Invaders, no, Arkanoid. Es increíble. Así que debe haber mucho desarrollo que se realizó, por supuesto, en el motor, React 3 Fiber, del cual no podemos entrar en detalles ahora, pero se ve realmente poderoso. Así que gracias por brindarlo a la comunidad.

Me encantaría ver sus preguntas.

Y espero que se hayan divertido aprendiendo un poco sobre WebGL, gráficos, 3DJS, React 3 Fiber, en React.

Y eso es básicamente todo.

Gracias nuevamente por tenerme, diviértanse.

Y adiós.

Hola Paul.

Hola.

Gracias por unirte a nosotros en esta increíble demostración.

Debo decir que solía trabajar en una empresa de publicidad desarrollando anuncios.

Y una vez estuve en un equipo que construyó un juego 3D con 3S, si recuerdo correctamente.

Han pasado seis o siete años, así que perdónenme si me equivoco.

Y eso no se veía tan fácil en absoluto.

No estuve involucrado en una parte 3D que se viera tan fácil como tú lo haces ver.

Lo haces ver, bueno, como, bueno, 60 líneas y construyes este pedal de pelota rebotante, comienzo de Space Invaders, no, Arkanoid.

Es increíble.

Así que debe haber mucho desarrollo que se realizó, por supuesto, en el motor, React 3 Fiber, del cual no podemos entrar en detalles ahora, pero se ve realmente poderoso.

Así que gracias por brindarlo a la comunidad.

QnA

Habilidades de Fotografía para React Fiber

Short description:

Si quieres usar React Fiber pero no tienes experiencia en fotografía, simplemente pruébalo y experimenta con las luces en la escena. También puedes buscar conceptos básicos de fotografía para entender términos como luz de relleno, luz de tira y luz principal. Puede ser útil conectarse con alguien que tenga experiencia en fotografía.

De acuerdo, quiero ir a la primera pregunta del público. La pregunta es de Cynthia. ¿Alguna recomendación para habilidades básicas de fotografía para aquellos que quieren usar React Fiber pero no tienen experiencia en fotografía? De acuerdo, supongo que solo inténtalo, simplemente pruébalo. Puedes colocar luces en la escena, ver cómo se ve, pero lo encontrarás en Google, solo busca conceptos básicos de fotografía, para que tengas una idea básica, qué es una luz de relleno, qué es una luz de tira, qué es una luz principal. Estos son conceptos esenciales para la fotografía y esto realmente te ayudará. Sí, solo para familiarizarte con la terminología, en mi experiencia, siempre hay, las personas que se dedican a la fotografía están realmente contentas con lo que hacen. Entonces, si tienes a alguien en tu entorno que se dedica a la fotografía, estarán encantados de ayudarte. Sí, al igual que los desarrolladores, sin faltar el respeto a los desarrolladores, por supuesto.

Motores de Física y API del Acelerómetro

Short description:

Existen motores de física, como CanonJS, que aprovechan las API de bajo consumo. Combinar React 3 Fiber con la API del Acelerómetro es posible, aunque personalmente no he experimentado con ello. La API del Acelerómetro es una API de JavaScript que proporciona datos de ángulo del dispositivo, lo que permite la interacción potencial de rotación del teléfono. Se aceptan solicitudes de extracción.

La siguiente pregunta es de Danilo, con WebAssembly volviéndose más prominente, ¿hay algún motor de física, que aproveche las API de bajo consumo? En realidad sí, no estoy seguro cuál era el nombre, supongo que AMO de physics JS o algo así, así que sí hay, pero CanonJS, el que estamos usando, se ejecuta en un WebWorker, así que está bien también, no bloquea el hilo principal. De acuerdo, espero que Danilo esté satisfecho con esa respuesta y si no, por supuesto, puede preguntarte en tu sala de Zoom para profundizar un poco más.

La siguiente pregunta es de Rin, ¿has tenido la oportunidad de experimentar con la combinación de esto con la API del Acelerómetro? Oh, buena pregunta. No, no mucho. No he hecho mucho con PWA, también llamado PWA. No importa, la API del Acelerómetro es solo una API de JavaScript. No lo he hecho, o React Native, no me resulta tan familiar, pero supongo que sería fácil. No creo que sea muy difícil de hacer. Sí, por lo que recuerdo, ha pasado un tiempo desde que lo toqué, es solo una API que dice, no sé, dispositivo.punto.ángulo, algo así. Solo obtienes un número de vuelta así que podrías girar el teléfono para mover tu panel, sería genial. Así que se aceptan solicitudes de extracción, ¿verdad? La siguiente pregunta es de Drum, con doble M.

Texturas y Materiales Personalizados

Short description:

Sí, todo lo que 3js puede hacer es posible en React 3 Fiber. Puedes combinar React y 3js para aprender ambos al mismo tiempo. Se recomienda tener una comprensión básica de cámaras, escenas y luces. El repositorio de GitHub de React 3 Fiber tiene una sección de fundamentos para principiantes. Aprender cómo escribir un renderizado personalizado en React es posible, pero la API puede cambiar con el tiempo. Conéctate conmigo en Twitter para obtener un ejemplo sencillo. Es posible mover la iluminación con el mouse en React 3 Fiber.

¿Se pueden usar texturas y materiales personalizados? Básicamente, cosas 3D adecuadas. Sí, por supuesto. Todo lo que 3js puede hacer es posible en React 3 Fiber. No hay limitaciones, no hay restricciones. La gente suele pensar que porque es React o porque es declarativo o involucra JSX, debe haber algo que no pueda hacer, pero no es el caso. Todo, cada pequeña cosa que hace 3js, también se puede hacer aquí. Materiales, texturas, todo. Entonces, una pregunta de seguimiento de mi parte, hola de Matthijs. Esta pregunta es de Matthijs. Si alguien ha visto esta demostración y piensa: eso es todo, quiero experimentar con esto. Pero ni siquiera tienen experiencia con 3js, ¿recomendarías que primero se sumerjan en 3js o que utilicen su experiencia en React y usen React 3 Fiber? Sí, sugeriría que al menos vayan a 3js.org, revisen todo, prueben algunas demostraciones y tienen algo así como un pequeño documento que te enseña cómo hacer una escena, cómo colocar las cámaras, cosas así. Supongo que sería mejor si lo hacen primero, pero no necesitan profundizar en 3js, pueden combinar ambos, es un poco como la gente, preguntan, ¿qué debería aprender primero, React? ¿O no sé, HTML, lo que sea, pero creo que puedes hacer ambas cosas al mismo tiempo. React definitivamente te ayudará porque no hay plantilla, puedes probar fácilmente las cosas, tienes recarga en caliente, así que facilitará el aprendizaje. Pero definitivamente debes conocer los conceptos básicos, qué es una cámara, qué es una escena, luces, etc. Debes aprender a caminar antes de correr. Sí, en el repositorio de GitHub de React 3 Fiber, hay una pequeña sección llamada fundamentos. Así que ese es el conocimiento básico que deberían tener antes de jugar con React 3 Fiber. De acuerdo, gracias. La siguiente pregunta es de Andrew Greenage. Hola, Paul, excelente charla. ¿Podrías contarnos un poco sobre el proceso de aprender a escribir un renderizado personalizado en React? No tenía idea, no hay documentación. Solo estaba probando. Prueba y error. Cambian la API todo el tiempo, así que eso fue un poco decepcionante, pero es posible. Si quieres, conéctate conmigo en Twitter y puedo darte un ejemplo muy sencillo. Tengo uno en CodeSandbox, son unas 50 líneas o algo así, y sí, te enseña los conceptos básicos. No es tan difícil, pero un poco complicado de entender si sabes a qué me refiero. De acuerdo, tenemos tiempo para una pregunta más. Es de Martin Yu. ¿También es posible mover la iluminación con el mouse en React? Sí, por supuesto.

Mover la iluminación con el mouse en Tree

Short description:

¿Es posible mover la iluminación con el mouse en Tree? Sí, hay una demo en mi GitHub. Martin Yu, puedes encontrar el enlace al GitHub de Paul en el sitio web. Siéntete libre de hacer cualquier pregunta restante en la sala de Zoom. Gracias, Tom.

¿También es posible mover la iluminación con el mouse en Tree? Sí, por supuesto. Tengo una demostración interesante de esto en mi GitHub.

De acuerdo, genial. Entonces, Martin Yu, te recomendaría ir al GitHub de Paul. ¿Cuál es tu nombre de usuario en GitHub? Tengo diferentes nombres de usuario en todas las plataformas. Bueno, el enlace probablemente esté en el sitio web hacia tu GitHub. Creo que es D-R-C-M-D-A, espero.

Así que para las personas que aún tienen preguntas sin respuesta o la pregunta fue respondida, pero no lo suficientemente a fondo, Paul todavía tiene tiempo para responder sus preguntas en su sala de Zoom a la que se dirigirá ahora. Paul, me gustaría agradecerte mucho por unirte a nosotros aquí hoy y compartir este increíble proyecto tuyo. Gracias, Tom. Adiós. Adiós.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.