Chargement de modèle

Pour créer une scène, il peut être utile d’avoir recours à des modèles créés au préalable. Il existe de nombreux formats de fichiers pour représenter un modèle 3D. Certains se limitent à stocker les informations de la géométrie tandis que d’autres peuvent contenir des scènes complètes avec les éclairages, les matériaux et les animations.

three.js n’inclut pas directement de méthode pour charger des fichiers. Cependant, vous pouvez intégrer des extensions pour le support de différents formats grâce à de fichiers JavaScript supplémentaires. Les fichiers sont disponibles à cette adresse :

https://github.com/mrdoob/three.js/tree/master/examples/js/loaders

Le chargeur glTF

Pour ce chapitre, nous détaillerons le chargement de fichiers au format glTF. glTF est le format en passe de devenir le standard dans l’infographie 3D. Il s’agit d’un format d’échange très complet et très adapté pour le Web qui permet de stocker une scène entière.

Le chargeur glTF pour three.js est disponible ici :

https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js

var loader = new THREE.GLTFLoader();

// Chargement de la scène GLTF
loader.load('models/fusee/model.glb', function (gltf) {
    scene.add(gltf.scene);
  },
  undefined,
  function (error) {
    console.error(error);
});

La méthode GLTFLoader.load prend trois paramètres :

• Une fonction de callback qui sera appelée avec le contenu du fichier en paramètre. L’attribut scene permet de récupérer la scène du fichier et de l’ajouter dans la scène d’origine.

• Une fonction de callback pour signaler la progression du chargement (optionnel).

• Une fonction de callback pour signaler une erreur au chargement (optionnel).

Note

Vous pouvez tester un exemple du chargement d’un fichier glTF à cette adresse.