Comment ajouter des images et des textures au fichier objet JSON Three.js

Question

Mon objectif principal est de charger un modèle 3D créé dans 3DS/MAX dans WebGL en utilisant la géniale bibliothèque Three.js. J'ai accompli les étapes suivantes vers cet objectif.

1. a tenté d'utiliser l'exportateur plugin MAX directement à Three.js JSON. C'était problématique et ça n'a pas marché.
2. Exporté le modèle MAX au format OBJ.
3. Conversion du modèle OBJ au format JSON avec le convertisseur Three.js Obj2Three.js.
4. Cela fonctionne très bien et je peux maintenant charger mon modèle dans Three.js mais aucune texture/image ne lui est appliquée.
5. Le fichier JSON a été inspecté et contient des sections Géométries, Matériaux, Métadonnées et Objet.
6. Le fichier Three.ObjectLoader gère également les images et les textures si ces sections sont définies dans le fichier.

Donc, ma question est comment est-ce accompli? Y a-t-il des utilitaires qui peuvent aider à ajouter des textures au fichier JSON?

Answer 1

Vous n'avez pas besoin de convertir du tout. Regardez dans le dossier des exemples de three.js et vous devriez voir tout un tas de chargeurs. Utilisez l'OBJLoader si vous voulez quelque chose qui est largement utilisé, sinon je suggère de regarder le FBXLoader ou ColladaLoader2 puisque ces fichiers sont beaucoup plus petits que .obj ou JSON. Voici une démonstration de l'utilisation du FBXLoader et en ajoutant aussi une texture, mais vous pouvez utiliser le même concept dans chaque chargeur:

loadFBX = function(modelPath, texturePath) { 

    var container = new THREE.Object3D(); 

    fbxLoader.load(modelPath, function(object) { 

     container.add(object); 

    object.traverse (function (child) { 

     if (child instanceof THREE.Mesh) { 
      //here's how we add the texture, you may need to 
      //UV Unwrap your model first in 3Ds 
      child.material = new THREE.MeshLambertMaterial(); 
      child.material.map = textureLoader.load(texturePath); 
     } 

    }); 

    }, onProgress, onError); 

    return container; 
} 

var model = loadFBX('../models/model.fbx', '../textures/texture.png'); 
scene.add(model); 

Pourquoi convertir quand vous pouvez charger obj ou même les formats .fbx directement? Mais si vous voulez vraiment, il y a une méthode très simple pour ajouter des textures à votre modèle JSON. Utilisez l'éditeur Three.js en ligne et faites glisser votre .obj ou n'importe quel modèle dans la scène. De là, vous pouvez ajouter la texture de l'image avec l'éditeur visuel, puis exporter l'objet en tant que .json. Vous pouvez ensuite simplement charger cela dans la scène et la texture sera incluse dans le fichier JSON.