Charger un modèle 3D GLB / GLTF avec Three.js – GLTFLoader

Importer la classe GLTFLoader

Lorsqu’un objet 3D est modélisé dans un outil externe tel que le logiciel Blender, il est possible de l’exporter sous plusieurs formats. L’une de ces possibilités est le format GLTF.

Les extensions des fichier de ce format sont .GBL ou .GLTF.

Three.js ne propose pas de solution pour charger nativement des modèles 3D de ce format. Cependant, une classe prévue à cet effet est disponible dans les add-ons officiels de la librairie :

import { GLTFLoader } from '../js/examples/jsm/loaders/GLTFLoader.js';

Utilisation de la classe GLTFLoader

Le constructeur de cette classe ne nécessite ici aucun argument. Pour commencer, nous créons un objet de type GLTFLoader.

var loader = new GLTFLoader();

Puis, avec la méthode load, nous chargeons un fichier GLB ou GLTF :

var loader = new GLTFLoader();

loader.load( '../Items/bluesword.glb', function ( gltf )
{
    [...]
} );		
			

Cette méthode nécessite deux arguments :

• Fichier GLB ou GLTF – Le chemin vers le fichier à charger
• Callback – Une fonction callback appelée lors de la fin du chargement du fichier

La suite des opérations nécessitent que le fichier soit chargé, pour s’assurer de cela, les opérations suivantes sont exécutées dans la fonction callback en paramètre.

Nous pouvons à présent utiliser le fichier chargé dans notre application Three.js !

sword = gltf.scene;  // sword 3D object is loaded
sword.scale.set(2, 2, 2);
sword.position.y = 4;

La variable gltf en paramètre de la fonction callback est le résultat du chargement par la méthode load.

L’objet 3D qui nous intéresse est disponible dans l’attribut scene de la variable gltf. Nous pouvons à présent l’utiliser comme un objet 3D Mesh Three.js classique.

scene.add(sword);

Résultat et code final

/*
*
*	We are using GLTFLoader to load the .glb 3D model
*
*/
var loader = new GLTFLoader();
			
loader.load( '../Items/bluesword.glb', function ( gltf )
{
	sword = gltf.scene;  // sword 3D object is loaded
	sword.scale.set(2, 2, 2);
	sword.position.y = 4;

	scene.add(sword);
} );

Bonus – Les animations incluses dans le modèle 3D

Il est également possible d’inclure des modèles 3D animés dans le format GLB / GLTF. Pour apprendre à utiliser ces animations, je vous conseille de lire cette publication :

Contrôler les animations d’un modèle 3D dans Three.JS avec AnimationMixer

Bonne lecture !

N’hésitez pas à télécharger le guide complet de Three.js University pour progresser encore plus vite !

Il nous reste encore beaucoup de choses à apprendre concernant le chargement d’objets 3D dans Three.js !

Dans les chapitre 9 et 10 du guide téléchargeable, nous découvrirons le détail du chargement des objets 3D, et toutes les notions liées ( ombres dynamiques, animations … ).

Vous pouvez télécharger le guide complet ici :