Um mergulho em React e Three.js Usando react-three-fiber

Hoje, vamos aprender como configurar e usar react-three-fiber para construir e exibir modelos 3D e animações em aplicativos React e React Native.

Este tutorial é para desenvolvedores que desejam aprender mais sobre animações de modelos 3D na web usando React e para qualquer pessoa que tenha limitações com Three.js como incapacidade de criar telas, vincular eventos de usuário como eventos de click e iniciar um loop de renderização, react-three-fiber vem com esses métodos. Construiremos um modelo 3D para entender melhor como construir modelos 3D do Three.js usando react-three-fiber .

Introdução react-three-fiber

O Three.js é uma biblioteca que facilita a criação de gráficos 3D no navegador, ele usa um canvas + WebGL para exibir os modelos 3D e animações, você pode saber mais aqui.

react-three-fiber é um renderizador React para Three.js na web e react-native, é um aumento na velocidade com que você cria modelos 3D e animações com Three.js, alguns exemplos de sites com modelos e animações 3D pode ser encontrado aqui. react-three-fiber reduz o tempo gasto em animações por causa de seus componentes reutilizáveis, eventos de vinculação e loop de renderização, primeiro vamos dar uma olhada no que é Three.js.

react-three-fiber nos permite construir componentes de código threeJS usando React state, hooks e props, ele também vem com os seguintes elementos:

Como usar react-three-fiber

Para usar react-three-fiber , você começa usando os comandos abaixo:

NPM

 npm i three react-three-fiber

FIO

 yarn add three react-three-fiber

Nota : Para react-three-fiber funcione, você precisará instalar three (Three.js) como fizemos acima.

Construindo um projeto de animação e modelo de dados Ludo React 3D

Aqui vamos construir um modelo de dados de ludo 3D usando react-three-fiber como temos no vídeo abaixo.

Estaremos usando create-react-app para inicializar nosso projeto, para isso vamos executar o comando abaixo em nosso terminal.

 create-react-app react-three-fiber-ludo-model

O comando acima inicializa um projeto React dentro de nossa máquina local, em seguida vamos cd no diretório e instalar nossos pacotes react-three-fiber e three .

 cd react-three-fiber-ludo-model npm i three react-three-fiber

Uma vez instalados os pacotes, vamos iniciar nosso servidor de desenvolvimento usando o comando

 npm start

O comando acima deve iniciar nosso servidor de desenvolvimento de projeto em nosso navegador. Em seguida, vamos abrir nosso projeto em nosso editor de texto de escolha, dentro da pasta src do nosso projeto, exclua os seguintes arquivos: App.css , App.test.js , serviceWorker.js e setupTests.js . Em seguida, vamos excluir todo o código que faz referência aos arquivos excluídos em nosso App.js .

Para este projeto, precisaremos de um componente Box para nossos dados ludo e nosso componente App que é fornecido pelo React.

Construindo o Componente da Box

O componente Box conterá a forma de nossos dados de ludo, uma imagem de um dado de ludo e um estado para mantê-lo sempre em rotação. Primeiro, vamos importar todos os pacotes que precisamos para o nosso componente Box abaixo.

 import React, { useRef, useState, useMemo } from "react"; import { Canvas, useFrame } from "react-three-fiber"; import * as THREE from "three"; import five from "./assets/five.png";

No código acima, estamos importando useRef , useState e useMemo . Usaremos o gancho useRef para acessar a malha dos dados e o gancho useState para verificar o estado ativo dos dados ludo. O gancho useMemo será usado para retornar o número nos dados. Em seguida, estamos importando Canvas e useFrame do react react-three-fiber , o canvas é usado para desenhar os gráficos no navegador, enquanto o useFrame permite que os componentes se conectem ao loop de renderização, isso possibilita que um componente seja renderizado o conteúdo de outro. Em seguida, importamos os three pacotes e depois importamos uma imagem estática de um dado de ludo.

O próximo passo é escrever a lógica para o nosso componente Box . Primeiro, vamos começar com a construção de um componente funcional e adicionar estado ao nosso componente, vamos fazer isso abaixo.

 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(five), []); return ( <Box /> ); }

No código acima, estamos criando um componente Box com props, em seguida criamos uma ref chamada mesh usando o hook useRef , fizemos isso para que possamos sempre retornar a mesma mesh todas as vezes.

Uma malha é um elemento visual em uma cena, é um objeto 3D que forma um polígono triangular, geralmente é construído usando uma Geometria, que é usada para definir a forma do modelo e Material que define a aparência do modelo, você pode aprenda sobre uma malha aqui, você também pode aprender mais sobre o gancho useRef aqui.

Após inicializar um mesh , precisamos inicializar um estado para nossa aplicação usando o hook useState , aqui configuramos o estado hover e active da aplicação para false.

Em seguida, usamos o gancho useFrame do react react-three-fiber para girar a malha (ludo dice), usando o código abaixo

 mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

Aqui, estamos girando a posição atual da malha a cada 0,01 segundo, isso é feito para dar uma boa animação à rotação.

 const texture = useMemo(() => new THREE.TextureLoader().load(five), []);

No código acima, estamos criando uma constante chamada texture e passando um gancho useMemo como uma função para carregar um novo lançamento de dados, aqui o useMemo para memorizar a imagem do dado e seu número. Você pode aprender sobre o gancho useMemo aqui.

Em seguida, queremos renderizar o componente Box no navegador e adicionar nossos eventos, fazemos isso abaixo

 const Box = (props) => { 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> ); }

No código acima, estamos retornando nosso componente Box e envolvendo-o na mesh , passamos todas as propriedades do componente Box usando o operador spread e, em seguida, referenciamos a malha usando o gancho useRef . Em seguida, usamos a propriedade scale de Three.js para definir o tamanho da caixa de dados quando estiver ativa para 2 e 1,5 quando não estiver. Por último, mas não menos importante, adicionamos um evento onClick para definir o state como active se não estiver definido como padrão.

 <boxBufferGeometry args={[1, 1, 1]} />

Para renderizar a caixa de dados, renderizamos o componente boxBufferGeometry de Three.js, boxBufferGeometry nos ajuda a desenhar linhas e pontos como caixas, usamos o argumento args para passar construtores como o tamanho da geometria da caixa.

 <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>

O meshBasicMaterial do Three.js é usado para desenhar geometrias de forma simples. Aqui passamos o atributo attach e um props THREE.DoubleSide para o atributo side . O THREE.DoubleSide define os lados ou espaços que devem ser renderizados por react-three-fiber .

 <primitive attach="map" object={texture} />

O componente primitive do Three.js é usado para desenhar gráficos 3D. Anexamos a propriedade map para manter a forma original dos dados de ludo. Em seguida, vamos renderizar nosso componente Box no arquivo App.js e completar nossa caixa de dados ludo 3d. Seu componente deve ser semelhante à imagem abaixo.

Renderizando 3D Ludo Dice Box

Nesta seção, vamos renderizar nosso componente Box em nosso App.js e completar nossa caixa 3d ludo, para fazer isso primeiro, vamos criar um componente App e envolvê-lo com uma tag Canvas , para renderizar nossos modelos 3D, vamos fazer isso abaixo.

 const App = () => { return ( <Canvas> </Canvas> ); } export default App;

Em seguida, vamos adicionar uma luz às caixas, react-three-fiber nos fornece três componentes para iluminar nossos modelos, eles são os seguintes

• ambientLight
  Isso é usado para iluminar todos os objetos em uma cena ou modelo igualmente, aceita adereços como a intensidade da luz, isso iluminará o corpo dos dados de ludo.
• spotLight
  Esta luz é emitida de uma única direção, e aumenta à medida que o tamanho do objeto aumenta, isso acenderá as pontas dos dados de ludo.
• pointLight
  Isso funciona de maneira semelhante à luz de uma lâmpada, a luz é emitida de um único ponto para todas as direções, isso será necessário para o estado ativo do nosso aplicativo.

Vamos implementar o acima em nosso aplicativo abaixo.

 const App = () => { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> </Canvas> ); } export default App;

No código acima, importamos o componente ambientLight do react react-three-fiber e adicionamos uma intensidade de 0,5 a ele, em seguida adicionamos uma posição e um ângulo ao nosso componente spotLight e pointLight . O passo final para nossa aplicação é renderizar nosso componente box e adicionar uma posição às caixas de dados ludo, faríamos isso no código abaixo

 <Box position={[-1.2, 0, 0]} /> <Box position={[2.5, 0, 0]} />

Quando terminar, seus dados ludo 3D devem ser semelhantes à imagem abaixo:

Uma demonstração funcional está disponível no CodeSandbox.

Conclusão

react-three-fiber tornou a renderização de modelos 3D e animações mais fáceis de criar para aplicativos React e React Native. Ao construir nossa caixa de dados ludo 3D, aprendemos sobre os fundamentos do Three.js juntamente com seus componentes e benefícios do react-three-fiber , bem como como usá-lo.

Você pode levar isso adiante construindo modelos 3D e animações em seus aplicativos React e Native usando react-three-fiber por conta própria. Eu adoraria ver as novidades que você inventa!

Você pode ler mais sobre Three.js e react react-three-fiber nas referências abaixo.

Recursos Relacionados

• Documentação do Three.js
• Fundamentos do Three.js
• React-Three-fiber GitHub repo por Poimandres
• documentação react-three-fiber
• React Hooks (useState, useMemo, etc.) documentação oficial