Repolode
Enviar
pmndrs

pmndrs/drei

Coleção de componentes auxiliares e hooks prontos para criar cenas 3D com react-three-fiber.

Ver no GitHubSite
Estrelas
9,994
Forks
853
Issues abertas
136
Último commit
há 12 horas

O que é?

drei é uma biblioteca auxiliar para react-three-fiber, o renderer de React para Three.js. Ela oferece componentes e hooks prontos para tarefas 3D comuns, evitando que desenvolvedores precisem recriar do zero controles de câmera, loaders, sombras, texto ou materiais de shader.

A biblioteca é organizada por área. Ela inclui câmeras e controles, como CameraControls, ScrollControls e KeyboardControls; gizmos, como TransformControls e GizmoHelper; abstrações para Text, Image, Edges e Trail; recursos para montar cenas, como Environment, Sky, Stars e ContactShadows; e utilitários de desempenho, incluindo Instances, Merged e AdaptiveDpr. Também inclui hooks de loader, como useGLTF e useTexture.

O pacote é publicado como @react-three/drei. Ele oferece uma entrada web padrão, que exporta Html e Loader, e uma entrada separada para React Native, que não inclui esses dois componentes. A documentação fica em um site separado, com exemplos interativos do Storybook.

Recursos principais

  • 01Componentes prontos para controles de câmera, gizmos e entrada por teclado ou rolagem
  • 02Abstrações para texto 3D, imagens, arestas, rastros e contornos
  • 03Hooks de loader, como useGLTF, useTexture e useFBX
  • 04Recursos para montar cenas com mapas de ambiente, céu, sombras e iluminação
  • 05Utilitários de desempenho, incluindo instanciamento, geometria combinada e resolução adaptativa
  • 06Pontos de entrada separados para web e React Native

Casos de uso

  • Criar visualizadores interativos de produtos com controles de órbita e modelos glTF carregados
  • Adicionar texto 3D, sobreposições HTML ou animações acionadas pela rolagem a um site em React
  • Criar cenas com sombras suaves, iluminação de ambiente e materiais reflexivos
  • Renderizar com eficiência grandes quantidades de malhas repetidas em um app com React Three Fiber

Início rápido

  1. 1

    Instale o pacote pelo npm

    npm install @react-three/drei

Antes de usar

  • A rota do React Native (@react-three/drei/native) não exporta Html nem Loader.
  • Ele foi desenvolvido para react-three-fiber, então você também precisa configurar o @react-three/fiber.

Tópicos

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

Perguntas frequentes

O que é drei?
Coleção de componentes auxiliares e hooks prontos para criar cenas 3D com react-three-fiber. drei é uma biblioteca auxiliar para react-three-fiber, o renderer de React para Three.js. Ela oferece componentes e hooks prontos para tarefas 3D comuns, evitando que desenvolvedores precisem recriar do zero controles de câmera, loaders, sombras, texto ou materiais de shader.
drei é gratuito? Qual é a licença?
drei é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
drei ainda é mantido?
Manutenção ativa. O último commit de drei foi em 19 de out. de 2026.
Para que posso usar drei?
Criar visualizadores interativos de produtos com controles de órbita e modelos glTF carregados Adicionar texto 3D, sobreposições HTML ou animações acionadas pela rolagem a um site em React Criar cenas com sombras suaves, iluminação de ambiente e materiais reflexivos Renderizar com eficiência grandes quantidades de malhas repetidas em um app com React Three Fiber
Como instalar drei?
Instale o pacote pelo npm: npm install @react-three/drei
Onde consigo drei?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/pmndrs/drei

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados