Fino ad ora, abbiamo usato solo forme primitive per creare le nostre scene 3D (cubo, sfera, piano, ecc...).

Ma ciò che rende la grafica 3D così interessante è la capacità di importare e visualizzare modelli 3D creati con software di modellazione 3D come Blender, Maya, Cinema 4D, Nomad Sculpt, ecc...

Introduzione

Non faremo modellazione 3D in questo corso poiché è un argomento a sé stante. Non è una competenza obbligatoria per creare esperienze 3D con threejs e React Three Fiber. È possibile trovare molti modelli 3D gratuiti online e usarli nei propri progetti. Tuttavia, imparare le basi della modellazione 3D può essere molto utile per comprendere meglio come sono realizzati i modelli 3D e come usarli nei propri progetti.

Se segui questa strada, ti consiglio di utilizzare Blender, che è un software di modellazione 3D gratuito e open-source. È uno strumento molto potente e ci sono molti tutorial disponibili online per imparare a usarlo.

Il più famoso per iniziare è il Donut Tutorial di Blender Guru.

Modelli 3D

I modelli 3D sono file che contengono dati riguardanti la geometria del modello 3D. Possono anche contenere texture e animazioni.

Esistono molti diversi formati di file per i modelli 3D. I più comuni sono:

• .obj: Un semplice formato di file che contiene solo la geometria del modello 3D.
• .fbx: Un formato di file binario che contiene la geometria, le texture e le animazioni del modello 3D. È il formato utilizzato da Unity e Unreal Engine.
• .gltf: Un formato di file JSON che contiene la geometria, le texture e le animazioni del modello 3D. È il formato consigliato per il web dato che è un formato molto compatto.
• .glb: La versione binaria del formato .gltf. È un formato più compatto, tipicamente il 33% più piccolo del formato .gltf.

In questo corso, utilizzeremo i formati .gltf e .glb.

È facile convertire un modello 3D da un formato all'altro usando Blender.

Trovare modelli 3D

Ecco alcuni siti web dove puoi trovare modelli 3D gratuiti:

• Poly Pizza: Una collezione di modelli 3D low-poly senza royalty.
• Pmndrs Market: Un'altra collezione di asset 3D senza royalty (Sì, dai creatori di React Three Fiber!)
• Sketchfab: Una piattaforma per condividere e scaricare modelli 3D. Molti modelli gratuiti disponibili!
• Unity Asset Store: Originariamente per Unity, ma puoi trovare molti pacchetti di modelli 3D da usare nei tuoi progetti.
• Quaternius: Un artista 3D che condivide pacchetti di modelli 3D gratuiti sul suo sito web.
• Kenney: Un altro fantastico creatore che condivide molti pacchetti di modelli 3D gratuiti di alta qualità.

In tutti i casi, assicurati di controllare la licenza dei modelli 3D che desideri utilizzare. Alcuni sono gratuiti per uso personale solo, altri sono gratuiti per uso commerciale, e alcuni non sono affatto gratuiti. Alcuni hanno anche licenze personalizzate per evitare che i modelli 3D siano utilizzati in un contesto specifico come gli NFT.

Ora che abbiamo i nostri modelli 3D, vediamo come caricarli nei nostri progetti.

Struttura del progetto

La cartella public è la cartella radice del nostro progetto. È dove mettiamo tutti gli asset statici del nostro progetto (immagini, modelli 3D, file audio, ecc...).

Per mantenere il nostro progetto organizzato, creeremo una cartella models nella cartella public per archiviare tutti i nostri modelli 3D.

Il pacchetto iniziale contiene già una cartella models con alcuni modelli 3D. Provengono da Quaternius.

useLoader

Il componente di base per caricare qualsiasi risorsa esterna in React Three Fiber è l'hook useLoader. È un hook che prende un loader come primo argomento e un url come secondo argomento. Restituisce la risorsa caricata.

Il loader è una classe che estende la classe Loader da threejs. Ci sono molti loader disponibili in threejs per caricare diversi tipi di risorse. Ad esempio, il GLTFLoader viene utilizzato per caricare file .gltf e .glb.

Carichiamo il nostro primo modello 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} />
    </>
  );
};

Il componente primitive viene utilizzato per visualizzare un oggetto threejs nella nostra scena. Prende una prop object che è l'oggetto threejs che vogliamo visualizzare.

Il nostro modello 3D è ora caricato e visualizzato nella nostra scena. (Bella, vero?)

useLoader si occupa di memorizzare nella cache la risorsa caricata. Quindi, se carichiamo la stessa risorsa più volte, verrà caricata solo una volta.

useGLTF / useFBX

La libreria Drei fornisce due hooks per caricare modelli 3D: useGLTF e useFBX. Sono dei wrapper attorno all'hook useLoader che sono più facili da usare.

Aggiorniamo il nostro codice esistente per usare l'hook useGLTF: