Até agora, usamos apenas formas primitivas para criar nossas cenas 3D (cubo, esfera, plano, etc...).

Mas o que torna os gráficos 3D tão interessantes é a habilidade de importar e exibir modelos 3D criados com softwares de modelagem 3D como Blender, Maya, Cinema 4D, Nomad Sculpt, etc...

Introdução

Não faremos modelagem 3D neste curso, pois é um tema completamente à parte. Não é uma habilidade obrigatória para criar experiências 3D com threejs e React Three Fiber. Você pode encontrar muitos modelos 3D gratuitos online e usá-los em seus projetos. Mas aprender o básico da modelagem 3D pode ser muito útil para entender melhor como os modelos 3D são feitos e como usá-los em seus projetos.

Se você seguir este caminho, recomendo usar o Blender, que é um software de modelagem 3D gratuito e de código aberto. É uma ferramenta muito poderosa e existem muitos tutoriais disponíveis online para aprender a usá-lo.

O mais famoso para começar é o Donut Tutorial do Blender Guru.

Modelos 3D

Modelos 3D são arquivos que contêm dados sobre a geometria do modelo 3D. Eles também podem conter texturas e animações.

Há muitos formatos de arquivo diferentes para modelos 3D. Os mais comuns são:

• .obj: Um formato de arquivo simples que contém apenas a geometria do modelo 3D.
• .fbx: Um formato de arquivo binário que contém a geometria, as texturas e as animações do modelo 3D. É o formato usado pelo Unity e Unreal Engine.
• .gltf: Um formato de arquivo JSON que contém a geometria, as texturas e as animações do modelo 3D. É o formato recomendado para a web por ser muito compacto.
• .glb: A versão binária do formato .gltf. É um formato mais compacto, tipicamente 33% menor que o formato .gltf.

Neste curso, usaremos os formatos .gltf e .glb.

É fácil converter um modelo 3D de um formato para outro usando o Blender.

Encontrando modelos 3D

Aqui estão alguns sites onde você pode encontrar modelos 3D gratuitos:

• Poly Pizza: Uma coleção de modelos 3D low-poly isentos de direitos autorais
• Pmndrs Market: Outra coleção de ativos 3D isentos de direitos autorais (Sim, dos criadores de React Three Fiber!)
• Sketchfab: Uma plataforma para compartilhar e baixar modelos 3D. Muitos modelos gratuitos disponíveis!
• Unity Asset Store: Originalmente para Unity, mas você pode encontrar muitos pacotes de modelos 3D que pode usar em seus projetos.
• Quaternius: Um artista 3D que compartilha pacotes de modelos 3D gratuitos em seu site.
• Kenney: Outro criador incrível que compartilha muitos pacotes de modelos 3D de alta qualidade gratuitamente.

Em todos os casos, certifique-se de verificar a licença dos modelos 3D que deseja usar. Alguns deles são gratuitos para uso pessoal apenas, alguns são gratuitos para uso comercial, e alguns não são gratuitos de forma alguma. Alguns também possuem licença personalizada para impedir que os modelos 3D sejam usados em um contexto específico como NFTs.

Agora que temos nossos modelos 3D, vamos ver como carregá-los em nossos projetos.

Estrutura do projeto

A pasta public é a pasta raiz do nosso projeto. É onde colocamos todos os ativos estáticos do nosso projeto (imagens, modelos 3D, arquivos de áudio, etc...).

Para manter nosso projeto organizado, vamos criar uma pasta models dentro da pasta public para armazenar todos os nossos modelos 3D.

O pacote inicial já contém uma pasta models com alguns modelos 3D. Eles são do Quaternius.

useLoader

O componente base para carregar quaisquer recursos externos no React Three Fiber é o hook useLoader. É um hook que recebe um loader como primeiro argumento e uma url como segundo argumento. Ele retorna o recurso carregado.

O loader é uma classe que estende a classe Loader do threejs. Existem muitos loaders disponíveis no threejs para carregar diferentes tipos de recursos. Por exemplo, o GLTFLoader é usado para carregar arquivos .gltf e .glb.

Vamos carregar nosso primeiro modelo 3D:

Copy
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

O componente primitive é usado para exibir um objeto threejs em nossa cena. Ele recebe uma prop object que é o objeto threejs que queremos exibir.

Nosso modelo 3D agora está carregado e exibido em nossa cena. (Legal, né?)

useLoader cuida de armazenar em cache o recurso carregado. Então, se carregarmos o mesmo recurso várias vezes, ele será carregado apenas uma vez.

useGLTF / useFBX

A biblioteca Drei fornece dois hooks para carregar modelos 3D: useGLTF e useFBX. Eles são invólucros em torno do hook useLoader que são mais fáceis de usar.

Vamos atualizar nosso código existente para usar o hook useGLTF: