Antes de começarmos a codificar, vamos dar uma olhada em por que estamos usando React Three Fiber e o que ele é.

WebGL

WebGL é uma API JavaScript para renderizar gráficos interativos 2D e 3D em qualquer navegador web compatível sem o uso de plug-ins.

É baseado no OpenGL ES, uma API de gráficos 3D de baixo nível para dispositivos embarcados. WebGL permite renderização acelerada por hardware de gráficos 2D e 3D, o que torna possível criar visualizações complexas e jogos que funcionam suavemente no navegador.

Mas escrever código WebGL diretamente é muito difícil e demorado. É aí que entra o Three.js...

Three.js

Three.js é uma biblioteca JavaScript que fornece uma API simples para criar e animar gráficos 3D no navegador usando WebGL.

Ela abstrai muitos dos detalhes de baixo nível do WebGL, tornando mais fácil criar cenas 3D complexas e animações.

React Three Fiber

React Three Fiber é um renderizador React para Three.js que permite usar Three.js de forma declarativa, similar a como você usa React para construir interfaces de usuário.

Você também verá ela referida como R3F.

R3F fornece um conjunto de componentes React que correspondem aos objetos do Three.js, como meshes, luzes e câmeras, e permite que você use o modelo de componentes do React para construir cenas 3D complexas e animações.

Para o mesmo resultado, o código do React Three Fiber é muito mais curto e fácil de ler do que o código do Three.js.

Aqui está um exemplo simples para exibir um cubo com ambas as bibliotecas:

Copy
// 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);

Copy
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres conhecido como pmndrs é um coletivo de desenvolvedores altamente ativo responsável pelo React Three Fiber e por outras bibliotecas muito úteis, tais como:

• drei: uma coleção de helpers úteis e componentes totalmente funcionais para r3f
• gltfjsx: uma ferramenta de linha de comando que gera componentes prontos para uso a partir de arquivos gltf (formato de arquivo de modelos 3D)
• react-spring: uma biblioteca de animação baseada em física de molas
• zustand: uma solução de gerenciamento de estado pequena, rápida e escalável
• react-xr: um conjunto de componentes React que facilita a criação de experiências de VR e AR utilizando R3F ... e muitas outras!

Utilizaremos algumas dessas bibliotecas neste curso.

Recomendo que você as confira, e faça isso frequentemente, pois são constantemente atualizadas com novos recursos e melhorias.

Alternativas

Existem outras bibliotecas que fornecem funcionalidades semelhantes para outros frameworks front-end, como Threlte para Svelte, TresJS para Vue e Angular Three para Angular.

Recentemente, pmndrs também lançou drei-vanilla, que é uma versão vanilla do drei para aqueles que desejam usar seus componentes sem React.