Como renderizar objetos 3D em um aplicativo React

A introdução da renderização 3D transformou a interação do usuário com as tecnologias da Internet. Para começar, os aplicativos da web se tornaram mais imersivos, proporcionando uma experiência envolvente e interativa por meio do navegador da web.

Essa tecnologia já foi adotada com entusiasmo pelos campos de jogos e realidade aumentada/virtual. Ele oferece uma maneira realista e imersiva de interagir com elementos virtuais.

Descubra como renderizar objetos 3D em um aplicativo React.

Noções básicas de modelagem e programação 3D

Antes de começar a renderizar em 3D, há alguns pontos que você precisa conhecer:

• Os objetos 3D contêm pontos individuais, ou vértices, que definem sua estrutura em três dimensões. A união desses pontos cria faces que compõem a forma do objeto na tela.
• Os navegadores modernos têm a capacidade integrada de renderizar 3D usando tecnologias como WebGL. Eles fazem isso utilizando o poder da unidade de processamento gráfico em sua máquina para renderizar modelos e cenas 3D rapidamente.
• Qualquer objeto 3D que seu navegador renderiza consiste em três componentes principais. Estes são a cena, a câmera e o renderizador, e todos eles desempenham um papel crucial. A cena fornece a plataforma básica para configurar todos os seus elementos 3D, incluindo luzes e câmeras. A câmera permite visualizar o objeto 3D de vários ângulos. Por fim, o renderizador monta e exibe a cena em cima de um elemento HTML da tela.

Renderização 3D com Three.js e React Three Fiber

Three.js é uma biblioteca JavaScript que você pode usar para renderizar objetos 3D em um navegador da web. Usando seus componentes integrados, você pode facilmente criar e renderizar objetos 3D em seu navegador juntamente com outros recursos de seu aplicativo React.

O pacote react-three-fiber funciona sobre o Three.js. Ele simplifica o processo de uso dos componentes Three.js para criar e renderizar objetos 3D no navegador. Curiosamente, ele também fornece ganchos personalizados do React que são úteis ao criar objetos 3D no React.

Renderizando objetos 3D em um aplicativo React

Siga as etapas abaixo para renderizar uma forma 3D simples em seu navegador, bem como um modelo 3D criado no Blender. Se você não estiver familiarizado com o Blender, saiba como começar como iniciante.

Crie um aplicativo React, abra seu terminal para executar o comando abaixo e instale as dependências necessárias:

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

Instale os pacotes Three.js, react-three-fiber e react-three-drei. A biblioteca react-three-drei funciona junto com react-three-fiber para criar cenas e objetos 3D.

Renderizar uma forma 3D

Você pode renderizar uma forma de caixa 3D simples em um navegador com muito pouco código. Abra o arquivo src/app.js , exclua todo o código clichê do React e adicione o seguinte:

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


function Box() {
  return (
    <mesh>
      <boxBufferGeometry attach ="geometry" />
      <meshLambertMaterial attach="material" color="hotpink" />
    </mesh>
  )
}

export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas>
          <OrbitControls />
          <ambientLight intensity ={0.5} />
          <spotLight position={[10, 15,10]} angle={0.3} />
          <Box />
        </Canvas>
      </div>
    </div>
  );
}

Este código faz o seguinte:

• O componente Box usa os componentes mesh, boxBufferGeometry e meshLambertMaterial da react-three-fiber para renderizar uma caixa 3D. Esses três componentes trabalham lado a lado para criar a forma da caixa.
• O componente boxBufferGeometry cria a caixa e esse código define a propriedade color do componente meshLambertMaterial como rosa choque.
• Em seguida, ele renderiza o elemento Canvas que abriga o componente de caixa com luz ambiente, um holofote e o conjunto de propriedades do componente Orbit Controls.
• A propriedade do componente de luz ambiente adiciona uma luz suave à tela. O componente spotLight adiciona uma luz focalizada de uma posição específica com um ângulo de 0,3. Por fim, o componente OrbitControls permite controlar a câmera em torno do objeto 3D.

Importe e renderize o componente app.js no arquivo index.js e crie um servidor de desenvolvimento para visualizar os resultados em seu navegador em http://localhost:3000.

Renderizar um modelo 3D criado pelo Blender

O Blender é uma ferramenta de código aberto usada por criativos em diferentes campos para criar modelos 3D, efeitos visuais e aplicativos 3D interativos. Você pode usar o Blender para criar modelos 3D para seu aplicativo da web.

Para este tutorial, você renderizará um modelo BMW 3D por desempenho SRT disponível no Sketchfab .

Para começar, baixe o modelo do Sketchfab em GLTF (GL Transmission Format). Esse formato facilita a renderização de modelos 3D no navegador. Após a conclusão do download, abra a pasta do modelo e mova o arquivo do modelo para o diretório público dentro do seu aplicativo React.

Agora, vá para o arquivo app.js e preencha-o com o código abaixo.

• Importe os seguintes componentes: import {useGLTF, Stage, PresentationControls} from "@react-three/drei";
• Crie o componente do modelo e adicione o código abaixo: function Model(props){
  const {scene} = useGLTF("/bmw.glb");
  return <primitive object={scene} {...props} />
}


  export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas
          dpr={[1,2]}
          shadows camera={{fav: 45}}
          style={{"position": "absolute"}}
        >
          <PresentationControls
            speed={1.5}
            global zoom={0.5}
            polar={[-0.1, Math.PI / 4]}
          >
            <Stage environment={null}>
              <Model scale={0.01} />
            </Stage>
          </PresentationControls>
        </Canvas>
      </div>
    </div>
  );
}


• O gancho useGLTF da biblioteca React-three-drei define uma variável de cena e atribui a ela o valor do arquivo de modelo localizado no caminho “/bmw.glb”. O componente então retorna um objeto primitivo que estabelece a cena para o modelo 3D.
• O elemento Canvas renderiza os principais componentes que compõem o modelo, com as propriedades especificadas, como proporção de pixel do dispositivo (DPR), sombras, ângulo da câmera e estilo.
• Em seguida, você especifica as propriedades do componente PresentationControls, como velocidade e zoom global. Essas propriedades definem como você controlará o modelo na tela.
• Por fim, configure o componente Stage que monta o modelo na tela do navegador.

Ative o servidor de desenvolvimento para atualizar as alterações em seu aplicativo. Você deve ver o modelo renderizado em seu navegador.

Renderizando modelos 3D em seu aplicativo da Web

A renderização de modelos 3D em seus aplicativos da Web pode oferecer vários benefícios, como melhorar a experiência do usuário ao fornecer uma sensação 3D mais realista e interativa. Como resultado, os usuários podem se envolver melhor com o produto.

No entanto, a renderização de elementos 3D pode ter suas desvantagens, como afetar negativamente o desempenho do aplicativo. Os modelos 3D exigem mais recursos para renderizar, o que pode fazer com que seu aplicativo carregue mais lentamente.