Three.js OBJLoader without adding object to scene

Question

I created a function for loading obj files in Three.js. Instead of adding the object directly to the scene in that function, I want to return it to the upper function.

Current code:

 var loadObjFile = function(modelConfiguration) {
        var mtlLoader = new THREE.MTLLoader();

        mtlLoader.load(modelConfiguration.mtl, function (materials) {
            materials.preload();
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.load(modelConfiguration.obj, function (object3d) {
                object3d.name = modelConfiguration.name;
                scene.add(object3d);
            });
        });
    };

Things I tried

Rewritting the function in difference ways. But couldn't get it to return the object3d. Example:

 var loadObjFile = function(modelConfiguration) {
    var mtlLoader = new THREE.MTLLoader();
    var obj;

    mtlLoader.load(modelConfiguration.mtl, function (materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load(modelConfiguration.obj, function (object3d) {
            object3d.name = modelConfiguration.name;
            obj = object3d;
        });
    });
    return obj;
};

Instead of adding the object3d to the scene, I added it to a dummy group and returned this group. It worked but later on I have a lot of unnecessary groups. I also tried to extract the object from the group with group.children[0] and group.getObjectByName(modelConfiguration.name) but it didn't work either. Example:

 var loadObjFile = function(modelConfiguration) {
    var mtlLoader = new THREE.MTLLoader();
    var group;

    mtlLoader.load(modelConfiguration.mtl, function (materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load(modelConfiguration.obj, function (object3d) {
            object3d.name = modelConfiguration.name;
            group.add(object3d);
        });
    });
    return group; // works, but unneccessary group
    //return group.children[0]; // error: undefined object
    //return group.getObjectByName(modelConfiguration.name); // error: undefined object
};

Thank you in advance!

I think returning the object to the outer function does not work because of the asynchronous character of your code. When the onLoad() callbacks fire, the outer functions have already returned. — Mugen87

Radio Radio · Accepted Answer · 2018-03-29T19:57:07

use a lambda:

var loadObjFile = function(modelConfiguration, onObj) {
    var mtlLoader = new THREE.MTLLoader();
    var obj;

    mtlLoader.load(modelConfiguration.mtl, function (materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.load(modelConfiguration.obj, function (object3d) {
            object3d.name = modelConfiguration.name;
            obj = object3d;
            onObj(obj);
        });
    });
};

use:

loadObjFile(myModelConfig, function(obj){
    console.log(obj);
})

Three.js OBJLoader without adding object to scene

1 Answers