Wawa Sensei logo

¿Qué es React Three Fiber?

Antes de comenzar a programar, echemos un vistazo a por qué estamos utilizando React Three Fiber y qué es.

WebGL

WebGL es una API de JavaScript para renderizar gráficos interactivos en 2D y 3D dentro de cualquier navegador web compatible sin el uso de complementos.

Está basado en OpenGL ES, una API de gráficos 3D de bajo nivel para dispositivos integrados. WebGL permite la renderización acelerada por hardware de gráficos en 2D y 3D, lo que hace posible crear visualizaciones complejas y juegos que se ejecutan de manera fluida en el navegador.

Pero escribir código WebGL directamente es muy difícil y requiere mucho tiempo. Ahí es donde entra Three.js...

Three.js

Three.js es una librería de JavaScript que proporciona una API simple para crear y animar gráficos 3D en el navegador utilizando WebGL.

Abstrae muchos de los detalles de bajo nivel de WebGL, haciendo que sea más fácil crear escenas 3D complejas y animaciones.

React Three Fiber

React Three Fiber es un renderizador de React para Three.js que te permite usar Three.js de una manera declarativa, similar a cómo utilizas React para construir interfaces de usuario.

También lo verás referido como R3F.

R3F proporciona un conjunto de componentes de React que corresponden a objetos de Three.js, como meshes, luces y cámaras, y te permite usar el modelo de componentes de React para construir escenas 3D complejas y animaciones.

Para el mismo resultado, el código de React Three Fiber es mucho más corto y fácil de leer que el código de Three.js.

Aquí hay un ejemplo simple para mostrar un cubo con ambas librerías:

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres, conocido como pmndrs, es un colectivo de desarrolladores muy activo responsable de React Three Fiber y otras bibliotecas muy útiles como:

  • drei: una colección de helpers útiles y componentes completamente funcionales para r3f
  • gltfjsx: una herramienta de línea de comandos que genera componentes listos para usar a partir de archivos gltf (formato de archivo de modelos 3D)
  • react-spring: una biblioteca de animación basada en física de muelles
  • zustand: una solución pequeña, rápida y escalable de gestión de estado
  • react-xr: un conjunto de componentes de React que facilita la creación de experiencias VR y AR usando R3F ... ¡y muchas más!

Usaremos algunas de estas bibliotecas en este curso.

Te recomiendo revisarlas, y hacerlo con frecuencia, ya que se actualizan constantemente con nuevas características y mejoras.

Alternativas

Existen otras bibliotecas que proporcionan funcionalidades similares para otros frameworks de front-end, como Threlte para Svelte, TresJS para Vue, y Angular Three para Angular.

Recientemente pmndrs también ha lanzado drei-vanilla, que es una versión sin dependencias de drei para aquellos que desean usar sus componentes sin React.

< Introduction
Setup >