如何在Three.js中加载带有多个.mtl文件的.obj文件

Question

I would like to load cube.obj file which references multiple cube_*.mtl files, which in turn use texture images *.png ( all resources ). The reason to load multiple mtl's instead of one is to be able dynamically load objects with the same geometry but different materials.

I couldn't find such example so I tried to mix examples in MultiMaterial(is no longer supported by threejs) documentation and webgl_loader_obj_mtl by loading all mtl's, creating MultiMaterial , and loading obj:

var resources = 'cube/';
var materialsToLoad = [
    'cube_red.mtl',
    'cube_green.mtl',
    'cube_blue.mtl'
];

var loadedMaterials = [];

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath(resources);
for (var i = 0; i < materialsToLoad.length; i++) {
    mtlLoader.load(materialsToLoad[i], function(materials) {
        materials.preload();
        loadedMaterials.push(materials);
    }); 
}

var multi = new THREE.MultiMaterial(loadedMaterials);
var objLoader = new THREE.OBJLoader();
objLoader.setPath(resources);
objLoader.setMaterials(multi); // #1
objLoader.load('cube.obj', function (object) {
    scene.add(object);
});

But this doesn't work, exception is thrown:

Uncaught TypeError: this.materials.create is not a function
at THREE.OBJLoader.parse (OBJLoader.js:684)
at OBJLoader.js:50
at XMLHttpRequest.<anonymous> (three.min.js:619)

What am I doing wrong and how to do that properly?

Answer 1

I think there are some problems here.

1) THREE.MTLLoader .load behaves as a "non blocking" function.

Thus, you are loading the OBJ files when the MTL ones are not still loaded completely. You need to load the OBJ files inside the callback function passed as argument on mtlLoader.load() . Look the example you have mentioned.

2) About the mtlLoader.load callback function passed as argument:

Its argument, materials , is of type THREE.MTLLoader.MaterialCreator . In consequence, loadedMaterials is an array of THREE.MTLLoader.MaterialCreator elements and, for create a THREE.MultiMaterial (no longer supported by threejs) , you need an array of THREE.Material elements.

Besides, MultiMaterial is used for assigning many materials to one object (one material per object's face), and not for "optionally" selecting a material for an object ( MultiMaterial Cube example ).

---

One approach for doing this (code NOT tested):

First, we'll need an LoadingManager :

var manager = new THREE.LoadingManager();

This is for assert that all MTL's have been loaded before load an OBJ:

manager.onLoad = function() {
    /* 
       At this point, all MTL's have been loaded.
       We will load an OBJ with the first material option
         (for example), if it exists.
    */

    if (loadedMaterials.length > 0) {
        var objLoader = new THREE.OBJLoader();
        objLoader.setPath(resources);
        objLoader.setMaterials(loadedMaterials[0]); // First material
        objLoader.load('cube.obj', function (object) {
        scene.add(object);
    }
};

And we load all MTL's:

var mtlLoader = new THREE.MTLLoader(manager);
mtlLoader.setPath(resources);
for (var i = 0; i < materialsToLoad.length; i++) {
    mtlLoader.load(materialsToLoad[i], function(materials) {
        materials.preload();
        loadedMaterials.push(materials);
    }); 
}

Hope it helps!