Three.js em React com React-Three-Fiber

Houve um tempo em que a renderização de gráficos de computador 3D animados dependia da presença de plug-ins de navegador proprietários, que um usuário teria que instalar para modificar seu navegador. No início dos anos 2000, uma API JavaScript chamada WebGL (Web Graphics Library) surgiu para resolver esse problema; ele permite a renderização de gráficos 2D e 3D em qualquer navegador da Web compatível, sem o uso de plug-ins externos.

O WebGL permite que nossa próxima tecnologia exista — Three.js. Three.js é uma biblioteca e API JavaScript de alto nível que é, novamente, usada para exibir gráficos 3D animados em um navegador da Web, sem o uso de extensões de navegador. A biblioteca Three.js é ampla e inclui recursos úteis como Geometria, Luzes, Sombreadores e algumas Animações.

Quando chegou a hora de aprender uma nova tecnologia por conta própria, como a última avaliação de habilidades durante meu tempo como estudante de engenharia de software, eu sabia que queria fazer algo artístico e criativo. Usar código para gerar animações no navegador foi uma escolha imediata e óbvia para mim, e comecei a explorar tecnologias que eu poderia usar em conjunto com minha linguagem favorita – React. Conforme aprendi mais sobre o Three.js, descobri que já existe uma biblioteca específica para integração com o React. A biblioteca é chamada React-Three-Fiber e pode ser usada para construir sua cena declarativamente com componentes reutilizáveis ​​e independentes que reagem ao estado e não requerem tratamento especial para trabalhar com o ecossistema do React.

Para começar a usar o React-Three-Fiber, basta instalá-lo no terminal do seu aplicativo React com a seguinte linha de código:

npm install three @react-three/fiber

import { Canvas } from '@react-three/fiber'

return (
<Canvas>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<Box position={[-2.2, 0, 0]} />
<Box position={[2.5, 0, 0]} />
</Canvas>
</div>
);

const Box = (props) => {
const mesh = useRef();
const [active, setActive] = useState(false);
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
});
const texture = useMemo(() => new THREE.TextureLoader().load(image), []);
return (
<mesh
{...props}
ref={mesh}
scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]}
onClick={(e) => setActive(!active)}
>
<boxBufferGeometry args={[1, 1, 1]} />
<meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>
<primitive attach="map" object={texture} />
</meshBasicMaterial>
</mesh>
);
}

É isso! Agora convocamos oficialmente um objeto 3D e dissemos a ele como se comportar, tudo usando React-Three-Fiber. Há muito mais do que o R3F é capaz, e brincar com os parâmetros desse código é um ótimo ponto de partida. Carregue algumas texturas diferentes, altere a iluminação, brinque com a escala ou ajuste a física do giro! Faça o que fizer, divirta-se com esta nova tecnologia que aprendemos juntos hoje.