Repolode
Enviar
pmndrs

pmndrs/react-three-fiber

Un renderer de React para Three.js que permite crear escenas 3D de forma declarativa con componentes JSX.

Ver en GitHubSitio web
Estrellas
33,534
Forks
2,080
Issues abiertos
15
Último commit
hace 17 días

¿Qué es?

react-three-fiber (@react-three/fiber) es un renderer de React para Three.js. En lugar de crear meshes, materiales y luces de forma imperativa, los escribes como elementos JSX, por ejemplo <mesh /> o <ambientLight />, y cada elemento corresponde al objeto de Three.js adecuado. Los componentes pueden tener su propio estado de React, responder a eventos del puntero y suscribirse al ciclo de renderizado mediante hooks como useFrame.

Como el renderizado ocurre fuera del árbol de componentes de React, el proyecto afirma que no añade sobrecarga en comparación con Three.js sin capas adicionales. Cualquier clase o funcionalidad de Three.js está disponible como elemento JSX, así que las nuevas versiones de Three.js no requieren cambios en la propia biblioteca. También se ofrecen paquetes para React Native. La biblioteca está diseñada para usarse con la versión principal de React correspondiente (v8 para React 18 y v9 para React 19).

El ecosistema más amplio de @react-three añade utilidades como drei, postprocesamiento, motores de física (Rapier, Cannon), compatibilidad con XR y un renderer de pruebas para Node.

Funciones clave

  • 01Escribe escenas de Three.js como elementos JSX que se corresponden directamente con objetos de Three.js.
  • 02Usa el estado de React y controladores de eventos como onClick y onPointerOver en objetos 3D.
  • 03Ejecuta lógica en cada fotograma con el hook useFrame dentro del ciclo de renderizado.
  • 04Accede a cualquier funcionalidad de Three.js sin esperar a que se actualice la biblioteca.
  • 05Admite React Native mediante un punto de entrada independiente.

Casos de uso

  • Crear configuradores interactivos de productos en 3D o visualizaciones de datos en una aplicación React.
  • Crear componentes de interfaz 3D reutilizables con estado y animaciones propios.
  • Añadir escenas 3D a una aplicación móvil con React Native.
  • Escribir pruebas unitarias para componentes de escenas 3D en Node con el renderer de pruebas.

Inicio rápido

  1. 1

    Instala los paquetes con npm

    npm install three @types/three @react-three/fiber
  2. 2

    Crea un Canvas y renderiza una escena con componentes JSX (consulta el ejemplo del README)

Antes de usarlo

  • La versión de react-three-fiber debe coincidir con la versión principal de React: v8 es compatible con react@18 y v9 con react@19.

Temas

#react#threejs#3d#webgl#renderer#graphics#animation#fiber

Preguntas frecuentes

¿Qué es react-three-fiber?
Un renderer de React para Three.js que permite crear escenas 3D de forma declarativa con componentes JSX. react-three-fiber (@react-three/fiber) es un renderer de React para Three.js. En lugar de crear meshes, materiales y luces de forma imperativa, los escribes como elementos JSX, por ejemplo <mesh /> o <ambientLight />, y cada elemento corresponde al objeto de Three.js adecuado. Los componentes pueden tener su propio estado de React, responder a eventos del puntero y suscribirse al ciclo de renderizado mediante hooks como useFrame.
¿react-three-fiber es gratuito? ¿Qué licencia tiene?
react-three-fiber es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-three-fiber sigue mantenido?
Mantenimiento activo. El último commit de react-three-fiber fue el 21 oct 2026.
¿Para qué puedo usar react-three-fiber?
Crear configuradores interactivos de productos en 3D o visualizaciones de datos en una aplicación React. Crear componentes de interfaz 3D reutilizables con estado y animaciones propios. Añadir escenas 3D a una aplicación móvil con React Native. Escribir pruebas unitarias para componentes de escenas 3D en Node con el renderer de pruebas.
¿Cómo se instala react-three-fiber?
Instala los paquetes con npm: npm install three @types/three @react-three/fiber Crea un Canvas y renderiza una escena con componentes JSX (consulta el ejemplo del README)
¿Dónde consigo react-three-fiber?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/pmndrs/react-three-fiber

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados