Como renderizar um modelo 3D em um aplicativo React JS

Olá👋,

Hoje em dia, os navegadores estão se tornando mais poderosos do que no passado e agora podem renderizar diferentes animações complexas com facilidade. Você pode ter visto muitos sites renderizando modelos 3D sem problemas de desempenho. Neste artigo, usaremos o Three.js para renderizar um modelo de iPhone em um aplicativo React.

Antes de começarmos este tutorial, deixe-me mostrar um site de demonstração que renderiza este modelo. Aqui está o link de demonstração: https://apple-iphone14.netlify.app/

Para este site, usei o Three.JS junto com o GSAP para adicionar animações de rolagem suave. Se você quiser aprender a criar essa página de destino 3D responsiva, assista ao seguinte tutorial👇.

Vamos renderizar um modelo 3D incrível em nosso aplicativo React.

Configuração e instalação

Para este tutorial, usaremos o modelo CRA (create-react-app). Abra a pasta do seu projeto e use o seguinte comando para instalar o modelo CRA.

 npx create-react-app 3d-model-in-reactjs

Você pode nomear seu aplicativo como desejar para este tutorial. Eu o mantive como "3d-mode-in-reactjs".

Aqui o npx é um utilitário que vem quando você instala o npm, ele nos ajuda a executar qualquer pacote npm disponível no registro npm sem instalar esse pacote.

Vamos instalar as bibliotecas necessárias para renderizar o modelo 3D. Altere o diretório para "3d-mode-in-reactjs" usando o seguinte comando.

 cd 3d-mode-in-reactjs

Use o seguinte comando para instalar duas bibliotecas @react-three/fiber e @react-three/drei .

 npm install @react-three/fiber @react-three/drei

• @react-three/fiber : É um renderizador React para threejs.

• @react-three/drei : É uma coleção de auxiliares úteis e abstrações totalmente funcionais e prontas para @react-three/fiber.

  
  

Para este tutorial, vamos usar um modelo 3D do Apple iPhone 13 Pro Max. Você pode obter este modelo no seguinte link👇.

• "Apple iPhone 13 Pro Max" da DatSketch está licenciado sob Creative Commons Attribution . Antes de usar este modelo em qualquer projeto certifique-se de verificar sua licença.

  
  

Abra o link fornecido e baixe o modelo no formato gltf . Por que GLTF? De acordo com a documentação do threejs, o glTF é focado na entrega de ativos em tempo de execução, é compacto para transmitir e rápido para carregar.

Depois de baixar o arquivo, crie uma pasta chamada assets dentro da pasta src e extraia todo o arquivo do modelo na pasta chamada 3D-Model .

Abra o arquivo App.css e substitua todo o código pelo seguinte css.

 .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

Agora estamos prontos para renderizar o modelo.

Vamos entender os fundamentos da renderização de um modelo 3D

Agora, existem 3 coisas que você deve ter em mente ao renderizar um modelo.

1. cena: Aqui você pode configurar todos os objetos, luzes e câmeras.

2. câmera: É usado para visualizar o modelo 3D através de diferentes anjos.

3. renderer: É usado para exibir/renderizar uma cena em um elemento HTML chamado canvas .

   
   

Se você estiver usando threejs diretamente em um projeto JavaScript simples, talvez seja necessário configurar todas essas coisas desde o básico, mas neste tutorial estamos usando @react-three/fiber e @react-three/drei , então não temos para fazer todas as coisas do zero.

Abra o arquivo App.js , limpe o código padrão e vamos importar o elemento canvas de @react-three/fiber . Confira o trecho de código a seguir.

 import "./App.css"; import { Canvas } from "@react-three/fiber"; function App() { return ( <div className="App"> <Canvas>{/* Here we will render out model */}</Canvas> </div> ); } export default App;

Aqui, o componente Canvas configura a scene e a camera e renderiza a scene a cada quadro.

Agora copie o seguinte código dentro do componente <Canvas /> .

 <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>

Vamos entender cada um desses elementos.

• <mesh> : Uma malha é uma classe que herda de Object3d e representa objetos poligonais. Na malha, você pode instanciar o objeto polígono usando Geometry e Material .

• <boxGeometry /> : É uma classe de geometria para um cuboide retangular com uma dada 'largura', 'altura' e 'profundidade'

• <meshStandardMaterial /> : É um material padrão com base física.

  
  

Por enquanto, você pode ver um quadrado preto no meio que não se parece com um objeto 3D.

Vamos adicionar controles para que possamos mover o ângulo da câmera em torno deste objeto 3D. Importe o <OrbitControls /> do @react-three/drei usando a seguinte linha.

 import { OrbitControls } from "@react-three/drei";

Agora renderize este <OrbitControls /> dentro dos componentes <Canvas> e após o <mesh> . Atualize a página do servidor de desenvolvimento e tente pegar o objeto. Agora você pode ver este quadrado como um objeto 3D. Este <OrbitControls /> permite que a câmera orbite em torno de um alvo.

Agora o objeto está totalmente preto porque não há fonte de luz. Então vamos adicionar luzes em nossa cena. Dentro do componente <Canvas /> adicione a seguinte linha antes do <mesh> .

 <ambientLight />

Aqui esta ambientLight ilumina globalmente todos os objetos na cena igualmente. Agora você pode ver a cor esbranquiçada do material da malha. Também podemos alterar a intensidade da luz ambiente por meio de adereços, conforme mostrado no código a seguir.

 <ambientLight intensity={1.25} />

Você também pode alterar a cor do objeto 3D usando prop color no <meshStandardMaterial /> . verifique a seguinte linha.

 <meshStandardMaterial color="green"/>

Agora a cor do objeto 3D é verde. Existem muitas luzes e elementos diferentes disponíveis que você pode usar para criar todo o modelo. Para isso, você pode consultar a documentação de threejs . Isso é tudo para o básico, não vamos renderizar nosso iPhone.

Convertendo modelo para componente JSX

Abra os arquivos do modelo e você verá diferentes arquivos como textures , scene.gltf , scene.bin etc. Vamos converter o scene.gltf em um componente JSX para que possamos renderizá-lo facilmente em nosso aplicativo React.

Agora, para converter qualquer arquivo GLTF em componente JSX, usaremos uma ferramenta de linha de comando simples chamada gltfjsx . De acordo com a documentação, o gltfjsx é uma pequena ferramenta de linha de comando que transforma ativos GLTF em componentes JSX de três fibras declarativos e reutilizáveis.

Agora abra o terminal/cmd e vá até o diretório onde você armazenou todos os arquivos do modelo, no meu caso está dentro da pasta 3D-Model que fica na pasta assets . Então, usarei o seguinte comando para alterar o diretório.

 cd src/assets/3D-Model

Agora use o seguinte comando.

 npx gltfjsx scene.gltf

Este comando levará alguns segundos e retornará o arquivo Scene.js que é o componente JSX.

NOTA: Este comando gltfjsx pode gerar um erro se você estiver usando a versão mais recente do NodeJS. Atualmente, estou usando 17.2.0 e este comando está funcionando bem. Se você enfrentar algum erro, faça o downgrade da versão do NodeJs e tente este código novamente. Você pode usar ferramentas como nvm para usar diferentes versões do NodeJs.

Importante!

Antes de renderizarmos o modelo do arquivo Scene.js , temos que copiar os arquivos do modelo para o diretório público , pois se você olhar no arquivo Scene.js , ele usa o hook useGLTF que carrega nós e materiais do arquivo /scene.gltf . Então copie textures , scene.bin e scene.gltf para a pasta pública do seu projeto.

Renderizando o modelo 3D

Abra o arquivo App.js e remova o <mesh> . Vamos importar o Model do arquivo Scene.js .

 import Model from "./assets/3D-Model/Scene";

Agora renderize o <Model /> dentro do componente <Canvas /> , antes do <OrbitControls /> .

 <Canvas> <ambientLight intensity={1.25} /> <Model /> <OrbitControls /> </Canvas>

Atualize a página de saída. Agora você deve ser capaz de ver a renderização do iphone na tela, pode aumentar e diminuir o zoom e mover o modelo. Vamos aumentar a visualização do modelo. Você pode acessar diretamente a câmera a partir do elemento canvas. Adicione a câmera dentro da tela como o seguinte trecho de código.

<Canvas camera={{fov: 18}}>

Aqui o fov representa o "campo de visão". Depois de definir o fov atualize a página para ver a saída. Por enquanto, definimos o fov como 18. Você pode tentar números diferentes e ver a saída.

Por enquanto não há reflexão sobre o modelo. Para adicionar reflexão no modelo, você deve definir imagens em torno deste modelo para que essas imagens possam refletir na superfície deste modelo. Em vez de adicionar essas imagens, vamos usar o componente <Environment /> da biblioteca @react-three/drei .

Vamos importar o <Environment /> ,

 import { Environment, OrbitControls } from "@react-three/drei";

Agora após o modelo, vamos adicionar o Environment.

 <Environment preset="sunset" />

Aqui, a predefinição define diferentes tipos de ambiente ao redor do modelo. Por enquanto, definimos como "pôr do sol". Você pode verificar as diferentes predefinições disponíveis aqui .

Depois de adicionar este ambiente, você deve ver o belo reflexo em nosso iPhone. Vamos renderizar o modelo dentro do componente Suspense do React para que ele possa carregar de forma assíncrona.

 <Suspense fallback={null}> <Model /> </Suspense>

Aqui está o código final.

https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06

Pensamentos finais

Este é o fim deste tutorial. Você pode usar https://docs.pmnd.rs/ para ler a documentação do @react-three/fiber e @react-three/drei e experimentar diferentes elementos. Se você deseja criar um site completo usando o modelo 3D e animar suas cores, siga o tutorial em vídeo fornecido no início desta lição.

Se você gostou deste tutorial, deveria conferir os tutoriais incríveis que tenho no meu canal do YouTube chamado CodeBucks . Você pode conferir aqui .

Você também pode gostar destes modelos de site:

• Um belo modelo de portfólio em ReactJS => aqui

• Página de destino da coleção NFT em ReactJS => [aqui](- Um belo modelo de portfólio em ReactJS => aqui )

  
  

Obrigado por ler este tutorial. Tenha um ótimo dia!