Repolode
Enviar
pmndrs

pmndrs/drei

Colección de componentes helper y hooks listos para usar en React para crear escenas 3D con react-three-fiber.

Ver en GitHubSitio web
Estrellas
9,994
Forks
853
Issues abiertos
136
Último commit
hace 12 horas

¿Qué es?

drei es una biblioteca de utilidades para react-three-fiber, el renderizador de React para Three.js. Incluye componentes y hooks prediseñados para tareas 3D habituales, para que los desarrolladores no tengan que crear desde cero controles de cámara, loaders, sombras, texto ni materiales shader.

La biblioteca está organizada por áreas. Incluye cámaras y controles como CameraControls, ScrollControls y KeyboardControls; gizmos como TransformControls y GizmoHelper; abstracciones para Text, Image, Edges y Trail; utilidades de puesta en escena como Environment, Sky, Stars y ContactShadows; y herramientas de rendimiento como Instances, Merged y AdaptiveDpr. También incluye hooks de carga como useGLTF y useTexture.

El paquete se publica como @react-three/drei. Ofrece una entrada web predeterminada que exporta Html y Loader, y una entrada independiente para React Native que omite esos dos componentes. La documentación está alojada en un sitio aparte con ejemplos interactivos de Storybook.

Funciones clave

  • 01Controles de cámara, gizmos y componentes prediseñados para la entrada de teclado y el desplazamiento
  • 02Abstracciones para texto 3D, imágenes, bordes, estelas y contornos
  • 03Hooks de carga como useGLTF, useTexture y useFBX
  • 04Utilidades de puesta en escena para mapas de entorno, cielo, sombras e iluminación
  • 05Herramientas de rendimiento que incluyen instanciación, geometría combinada y resolución adaptativa
  • 06Puntos de entrada independientes para web y React Native

Casos de uso

  • Crear visores interactivos de productos con controles de órbita y modelos glTF cargados
  • Añadir texto 3D, superposiciones HTML o animaciones controladas por el desplazamiento a un sitio React
  • Crear escenas con sombras suaves, iluminación ambiental y materiales reflectantes
  • Renderizar de forma eficiente grandes cantidades de meshes repetidas en una aplicación React Three Fiber

Inicio rápido

  1. 1

    Instala el paquete desde npm

    npm install @react-three/drei

Antes de usarlo

  • La ruta de React Native (@react-three/drei/native) no exporta Html ni Loader.
  • Está diseñado para react-three-fiber, así que también debes configurar @react-three/fiber.

Temas

#react#threejs#3d#webgl#react-three-fiber#graphics#helpers#hooks

Preguntas frecuentes

¿Qué es drei?
Colección de componentes helper y hooks listos para usar en React para crear escenas 3D con react-three-fiber. drei es una biblioteca de utilidades para react-three-fiber, el renderizador de React para Three.js. Incluye componentes y hooks prediseñados para tareas 3D habituales, para que los desarrolladores no tengan que crear desde cero controles de cámara, loaders, sombras, texto ni materiales shader.
¿drei es gratuito? ¿Qué licencia tiene?
drei es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿drei sigue mantenido?
Mantenimiento activo. El último commit de drei fue el 19 oct 2026.
¿Para qué puedo usar drei?
Crear visores interactivos de productos con controles de órbita y modelos glTF cargados Añadir texto 3D, superposiciones HTML o animaciones controladas por el desplazamiento a un sitio React Crear escenas con sombras suaves, iluminación ambiental y materiales reflectantes Renderizar de forma eficiente grandes cantidades de meshes repetidas en una aplicación React Three Fiber
¿Cómo se instala drei?
Instala el paquete desde npm: npm install @react-three/drei
¿Dónde consigo drei?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/pmndrs/drei

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

Proyectos relacionados