I am attempting to load the cube.obj file which references multiple cube_*.mtl files, each of which utilize texture images in the format *.png. The resources can be found here. My goal is to dynamically load objects with the same geometry but different materials by loading multiple mtl files.
After researching, I attempted to combine examples from the no longer supported MultiMaterial documentation, and the webgl_loader_obj_mtl example. This involved loading all mtl files, creating a MultiMaterial, and then loading the obj file:
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);
});
However, this approach resulted in an exception being 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)
I am seeking guidance on what I might be doing wrong and how to properly achieve my goal.