Jusqu'à présent, nous avons seulement utilisé des formes primitives pour créer nos scènes 3D (cube, sphère, plan, etc...).

Mais ce qui rend les graphismes 3D si intéressants, c'est la capacité à importer et afficher des modèles 3D créés avec des logiciels de modélisation 3D tels que Blender, Maya, Cinema 4D, Nomad Sculpt, etc...

Introduction

Nous ne ferons pas de modélisation 3D dans ce cours car c'est un sujet à part entière. Ce n'est pas une compétence obligatoire pour créer des expériences 3D avec threejs et React Three Fiber. Vous pouvez trouver de nombreux modèles 3D gratuits en ligne et les utiliser dans vos projets. Mais apprendre les bases de la modélisation 3D peut être très utile pour mieux comprendre comment les modèles 3D sont faits et comment les utiliser dans vos projets.

Si vous suivez cette voie, je vous recommande d'utiliser Blender, qui est un logiciel de modélisation 3D gratuit et open-source. C'est un outil très puissant et il existe de nombreux tutoriels en ligne pour apprendre à l'utiliser.

Le plus célèbre pour commencer est le Donut Tutorial de Blender Guru.

Modèles 3D

Les modèles 3D sont des fichiers qui contiennent des données sur la géométrie du modèle 3D. Ils peuvent également contenir des textures et des animations.

Il existe de nombreux formats de fichiers différents pour les modèles 3D. Les plus courants sont :

• .obj : Un format de fichier simple qui ne contient que la géométrie du modèle 3D.
• .fbx : Un format de fichier binaire qui contient la géométrie, les textures et les animations du modèle 3D. C'est le format utilisé par Unity et Unreal Engine.
• .gltf : Un format de fichier JSON qui contient la géométrie, les textures et les animations du modèle 3D. C'est le format recommandé pour le web car c'est un format très compact.
• .glb : La version binaire du format .gltf. C'est un format plus compact, typiquement 33% plus petit que le format .gltf.

Dans ce cours, nous utiliserons les formats .gltf et .glb.

Il est facile de convertir un modèle 3D d'un format à un autre en utilisant Blender.

Trouver des modèles 3D

Voici quelques sites où vous pouvez trouver des modèles 3D gratuits :

• Poly Pizza : Une collection de modèles 3D low-poly libres de droits.
• Pmndrs Market : Une autre collection d'assets 3D libres de droits (Oui, des créateurs de React Three Fiber!)
• Sketchfab : Une plateforme pour partager et télécharger des modèles 3D. Beaucoup de modèles gratuits disponibles !
• Unity Asset Store : À l'origine pour Unity, mais vous pouvez trouver de nombreux packs de modèles 3D que vous pouvez utiliser dans vos projets.
• Quaternius : Un artiste 3D qui partage des packs de modèles 3D gratuits sur son site.
• Kenney : Un autre créateur génial qui partage de nombreux packs de modèles 3D de haute qualité gratuitement.

Dans tous les cas, assurez-vous de vérifier la licence des modèles 3D que vous souhaitez utiliser. Certains sont gratuits pour un usage personnel uniquement, certains sont gratuits pour un usage commercial, et d'autres ne sont pas du tout gratuits. Certains ont également une licence personnalisée pour empêcher l'utilisation des modèles 3D dans un contexte spécifique comme les NFTs.

Maintenant que nous avons nos modèles 3D, voyons comment les charger dans nos projets.

Structure du projet

Le dossier public est le dossier racine de notre projet. C'est là où nous mettons tous les assets statiques de notre projet (images, modèles 3D, fichiers audio, etc...).

Pour garder notre projet organisé, nous allons créer un dossier models dans le dossier public pour stocker tous nos modèles 3D.

Le pack de démarrage contient déjà un dossier models avec quelques modèles 3D à l'intérieur. Ils viennent de Quaternius.

useLoader

Le composant de base pour charger des ressources externes dans React Three Fiber est le hook useLoader. C'est un hook qui prend un loader comme premier argument et une url comme second argument. Il retourne la ressource chargée.

Le loader est une classe qui étend la classe Loader de threejs. Il existe de nombreux loaders disponibles dans threejs pour charger différents types de ressources. Par exemple, le GLTFLoader est utilisé pour charger les fichiers .gltf et .glb.

Chargons notre premier modèle 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} />
    </>
  );
};

Le composant primitive est utilisé pour afficher un objet threejs dans notre scène. Il prend une prop object qui est l'objet threejs que nous voulons afficher.

Notre modèle 3D est maintenant chargé et affiché dans notre scène. (Sympa, non?)

useLoader prend en charge le caching de la ressource chargée. Donc, si nous chargeons la même ressource plusieurs fois, elle ne sera chargée qu'une seule fois.

useGLTF / useFBX

La bibliothèque Drei fournit deux hooks pour charger des modèles 3D : useGLTF et useFBX. Ce sont des enveloppes autour du hook useLoader qui sont plus faciles à utiliser.

Mettons à jour notre code existant pour utiliser le hook useGLTF :