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 para renderizar um modelo de iPhone em um aplicativo React. Three.js 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👇. https://youtu.be/cT160dOzpGY Vamos renderizar um modelo 3D incrível em nosso aplicativo React. Configuração e instalação Para este tutorial, usaremos o modelo (create-react-app). Abra a pasta do seu projeto e use o seguinte comando para instalar o modelo CRA. 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 e . @react-three/fiber @react-three/drei npm install @react-three/fiber @react-three/drei : É um renderizador React para threejs. @react-three/fiber : É uma coleção de auxiliares úteis e abstrações totalmente funcionais e prontas para @react-three/fiber. @react-three/drei Para este tutorial, vamos usar um modelo 3D do Apple iPhone 13 Pro Max. Você pode obter este modelo no seguinte link👇. da DatSketch está licenciado sob . Antes de usar este modelo em qualquer projeto certifique-se de verificar sua licença. "Apple iPhone 13 Pro Max" Creative Commons Attribution Abra o link fornecido e baixe o modelo no formato . Por que GLTF? De acordo com a do threejs, o gltf documentaçã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 dentro da pasta e extraia todo o arquivo do modelo na pasta chamada . assets src 3D-Model Abra o arquivo e substitua todo o código pelo seguinte css. App.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. cena: Aqui você pode configurar todos os objetos, luzes e câmeras. câmera: É usado para visualizar o modelo 3D através de diferentes anjos. 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 e , então não temos para fazer todas as coisas do zero. @react-three/fiber @react-three/drei Abra o arquivo , limpe o código padrão e vamos importar o elemento de . Confira o trecho de código a seguir. App.js canvas @react-three/fiber 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 configura a e a e renderiza a a cada quadro. Canvas scene camera scene Agora copie o seguinte código dentro do componente . <Canvas /> <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas> Vamos entender cada um desses elementos. : Uma é uma classe que herda de Object3d e representa objetos poligonais. Na malha, você pode instanciar o objeto polígono usando e . <mesh> malha Geometry Material : É uma classe de geometria para um cuboide retangular com uma dada 'largura', 'altura' e 'profundidade' <boxGeometry /> : É um material padrão com base física. <meshStandardMaterial /> 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 do usando a seguinte linha. <OrbitControls /> @react-three/drei import { OrbitControls } from "@react-three/drei"; Agora renderize este dentro dos componentes e após o . Atualize a página do servidor de desenvolvimento e tente pegar o objeto. Agora você pode ver este quadrado como um objeto 3D. Este permite que a câmera orbite em torno de um alvo. <OrbitControls /> <Canvas> <mesh> <OrbitControls /> Agora o objeto está totalmente preto porque não há fonte de luz. Então vamos adicionar luzes em nossa cena. Dentro do componente adicione a seguinte linha antes do . <Canvas /> <mesh> <ambientLight /> Aqui esta 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 <ambientLight intensity={1.25} /> Você também pode alterar a cor do objeto 3D usando prop no . verifique a seguinte linha. color <meshStandardMaterial /> <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 . Isso é tudo para o básico, não vamos renderizar nosso iPhone. threejs Convertendo modelo para componente JSX Abra os arquivos do modelo e você verá diferentes arquivos como , , etc. Vamos converter o em um componente JSX para que possamos renderizá-lo facilmente em nosso aplicativo React. textures scene.gltf scene.bin scene.gltf Agora, para converter qualquer arquivo GLTF em componente JSX, usaremos uma ferramenta de linha de comando simples chamada . De acordo com a documentação, o é uma pequena ferramenta de linha de comando que transforma ativos GLTF em componentes JSX de três fibras declarativos e reutilizáveis. gltfjsx gltfjsx 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 que fica na pasta . Então, usarei o seguinte comando para alterar o diretório. 3D-Model assets cd src/assets/3D-Model Agora use o seguinte comando. npx gltfjsx scene.gltf Este comando levará alguns segundos e retornará o arquivo que é o componente JSX. Scene.js 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 para usar diferentes versões do NodeJs. nvm Importante! Antes de renderizarmos o modelo do arquivo , temos que copiar os arquivos do modelo para o diretório , pois se você olhar no arquivo , ele usa o hook que carrega nós e materiais do arquivo . Então copie , e para a pasta do seu projeto. Scene.js público Scene.js useGLTF /scene.gltf textures scene.bin scene.gltf pública Renderizando o modelo 3D Abra o arquivo e remova o . Vamos importar o do arquivo . App.js <mesh> Model Scene.js import Model from "./assets/3D-Model/Scene"; Agora renderize o dentro do componente , antes do . <Model /> <Canvas /> <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 representa o "campo de visão". Depois de definir o atualize a página para ver a saída. Por enquanto, definimos o como 18. Você pode tentar números diferentes e ver a saída. fov fov fov 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 da biblioteca . componente <Environment /> @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 do React para que ele possa carregar de forma assíncrona. Suspense <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 para ler a documentação do e 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. https://docs.pmnd.rs/ @react-three/fiber @react-three/drei Se você gostou deste tutorial, deveria conferir os tutoriais incríveis que tenho no meu canal do YouTube chamado . Você pode conferir . CodeBucks 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! Publicado também . aqui

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Polygon

Apple

Target

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

HackerNoon Mobile

Como renderizar um modelo 3D em um aplicativo React JS

Muito longo; Para ler

People Mentioned

Companies Mentioned

Coin Mentioned

@codebucks

Credibility

HISTÓRIAS RELACIONADAS