How to use Three.js load obj and mtl files

OBJ and MTL is a geometric model files and file material 3D models.

Three.js in the latest version (r78) in the previous OBJMTLLoader class is obsolete.

Now to load and OBJ MTL file, requires a combination of OBJLoader and MTLLoader two classes to implement, which also provides operational flexibility.

The following code is first loaded egg.mtl material used MTLLoader file, then the material is provided to a OBJLoader object for use when loading obj model.

onProgress is loading process callbacks, onError error handling function.

// model
var onProgress = function(xhr) {
    if (xhr.lengthComputable) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
};
 
var onError = function(xhr) {};
 
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
 
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/uploads/160601/obj/');
mtlLoader.load('egg.mtl', function(materials) {
 
    materials.preload();
 
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('/uploads/160601/obj/');
    objLoader.load('egg.obj', function(object) {
 
        object.position.y = -0.5;
        scene.add(object);
 
    }, onProgress, onError);
 
});

 

Complete code: https://wow.techbrood.com/fiddle/27158