Repolode
Enviar
pmndrs

pmndrs/react-three-fiber

Um renderer React para Three.js que permite criar cenas 3D de forma declarativa com componentes JSX.

Ver no GitHubSite
Estrelas
33,534
Forks
2,080
Issues abertas
15
Último commit
há 17 dias

O que é?

react-three-fiber (@react-three/fiber) é um renderer React para Three.js. Em vez de criar meshes, materiais e luzes de forma imperativa, você os escreve como elementos JSX, como <mesh /> ou <ambientLight />, e cada elemento corresponde ao objeto Three.js apropriado. Os componentes podem ter seu próprio estado React, responder a eventos de ponteiro e se inscrever no loop de renderização usando hooks como useFrame.

Como a renderização acontece fora da árvore de componentes do React, o projeto afirma que não há sobrecarga em comparação com o Three.js puro. Qualquer classe ou recurso do Three.js pode ser usado como elemento JSX, então novas versões do Three.js não exigem alterações na própria biblioteca. Também são disponibilizados pacotes para React Native. A biblioteca foi projetada para ser usada com uma versão principal correspondente do React (v8 para React 18, v9 para React 19).

O ecossistema mais amplo de @react-three oferece helpers como drei, pós-processamento, engines de física (Rapier, Cannon), suporte a XR e um test renderer para Node.

Recursos principais

  • 01Escreva cenas do Three.js como elementos JSX que correspondem diretamente a objetos do Three.js.
  • 02Use estado do React e manipuladores de eventos, como onClick e onPointerOver, em objetos 3D.
  • 03Execute lógica a cada frame com o hook useFrame dentro do loop de renderização.
  • 04Acesse qualquer recurso do Three.js sem precisar esperar por atualizações da biblioteca.
  • 05Oferece suporte a React Native por meio de um ponto de entrada separado.

Casos de uso

  • Criar configuradores interativos de produtos 3D ou visualizações de dados em um app React.
  • Criar componentes de UI 3D reutilizáveis, com estado e animações próprios.
  • Adicionar cenas 3D a um app móvel com React Native.
  • Escrever testes unitários para componentes de cenas 3D no Node com o test renderer.

Início rápido

  1. 1

    Instale os pacotes com npm

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

    Crie um Canvas e renderize uma cena com componentes JSX (consulte o exemplo no README)

Antes de usar

  • A versão do react-three-fiber deve corresponder à versão principal do React: v8 é compatível com react@18 e v9 com react@19.

Tópicos

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

Perguntas frequentes

O que é react-three-fiber?
Um renderer React para Three.js que permite criar cenas 3D de forma declarativa com componentes JSX. react-three-fiber (@react-three/fiber) é um renderer React para Three.js. Em vez de criar meshes, materiais e luzes de forma imperativa, você os escreve como elementos JSX, como <mesh /> ou <ambientLight />, e cada elemento corresponde ao objeto Three.js apropriado. Os componentes podem ter seu próprio estado React, responder a eventos de ponteiro e se inscrever no loop de renderização usando hooks como useFrame.
react-three-fiber é gratuito? Qual é a licença?
react-three-fiber é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
react-three-fiber ainda é mantido?
Manutenção ativa. O último commit de react-three-fiber foi em 21 de out. de 2026.
Para que posso usar react-three-fiber?
Criar configuradores interativos de produtos 3D ou visualizações de dados em um app React. Criar componentes de UI 3D reutilizáveis, com estado e animações próprios. Adicionar cenas 3D a um app móvel com React Native. Escrever testes unitários para componentes de cenas 3D no Node com o test renderer.
Como instalar react-three-fiber?
Instale os pacotes com npm: npm install three @types/three @react-three/fiber Crie um Canvas e renderize uma cena com componentes JSX (consulte o exemplo no README)
Onde consigo react-three-fiber?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/pmndrs/react-three-fiber

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

Projetos relacionados