Charger un modèle 3D OBJ + MTL avec Three.js

Importer les classes OBJLoader et MTLLoader

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 .OBJ + .MTL.

Three.js ne propose pas de solution pour charger nativement des modèles 3D OBJ + MTL. Cependant, des classes prévues à cet effet sont disponibles dans les add-ons officiels de la librairie :

• OBJLoader – Fichiers OBJ
• MTLLoader – Fichiers MTL

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

Utilisation des classes OBJLoader et MTLLoader

Ces deux classes fonctionnent souvent en association, un fichier OBJ est souvent accompagné d’un MTL.

Concrètement, le fichier OBJ est comparable à une « Geometry » Three.js, et MTL à un « Material ». L’objet 3D chargé est issu de la fusion de ces deux éléments. Notons tout de même qu’il existe des fichiers OBJ non accompagnés d’un fichier MTL !

L’utilisation de ces deux classes est donc fortement liée. Comme expliqué, OBJLoader sera utilisé pour charger la « Geometry » de notre objet 3D, et MTLLoader son « Material ».

Utilisation de MTLLoader

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

var mtlLoader = new MTLLoader();

Puis, avec la méthode load, nous chargeons un fichier MTL :

var mtlLoader = new MTLLoader();
mtlLoader.load("plant_block.mtl", function(materials)
{
	materials.preload();

	[...]
});

Cette méthode nécessite deux arguments :

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

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

Utilisation de OBJLoader

Lorsque le fichier MTL est chargé, nous pouvons commencer le chargement du fichier OBJ. Pour cela, nous utilisons la classe OBJLoader.

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

var objLoader = new OBJLoader();

Pour rappel, nous utilisons OBJLoader dans la fonction callback exécutée après le chargement du fichier MTL.

Comme expliqué, le « Material » chargé précédemment y est transmis en paramètre, et par conséquent, disponible pour y être utilisé par OBJLoader.

La méthode setMaterials de la classe OBJLoader nous permet d’associer la future « Geometry » chargée à un « Material ».

Puis, nous chargeons le fichier OBJ avec la méthode load :

var objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("plant_block.obj", function(object)
{	
	[...]
});

Cette méthode nécessite deux arguments :

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

Comme expliqué , à la fin du chargement du fichier OBJ, la fonction callback sera exécutée.

L’objet 3D Mesh généré par le chargement du OBJ combiné au « Material » du paragraphe précédent, sera transmis en paramètre de la fonction callback, pour y être utilisé.

objLoader.load("plant_block.obj", function(object)
{	
    plant_cube = object;
});

C’est dans cette fonction callback que nous avons accès à l’objet Mesh final, issu du chargement d’un lot de deux fichiers, un OBJ et un MTL.

Nous pouvons a présent utiliser l’objet 3D dans notre application Three.js.

scene.add( plant_cube );

Résultat et code final

var plant_cube = undefined;

mtlLoader.load("plant_block.mtl", function(materials)
{
	materials.preload();
	var objLoader = new OBJLoader();
	objLoader.setMaterials(materials);
	objLoader.load("plant_block.obj", function(object)
	{	
		plant_cube = object;
		scene.add( plant_cube );
	});
});

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 :