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...😜

Como renderizar um modelo 3D em um aplicativo React JS

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps