How to load and manage many threejs object?

Question

Currently I am having a problem with assigning name to mesh object before loading it. I have the code as below, and the object’s name (as well as position) always take the value of the last model in the array.

Do you have any idea how to solve it? Thank you :)

for (var model in scenario_models)
{
    var id = model.id;
    var loader = new THREE.OBJMTLLoader();
    loader.load('/static/models/building_models/ZehYO2qAzU7wm6HfCeIVJC62EQQqW0wv8h4pa0TzhAtSm9qoL6/male02.obj',
        '/static/models/building_models/ZehYO2qAzU7wm6HfCeIVJC62EQQqW0wv8h4pa0TzhAtSm9qoL6/male02.mtl',
        function ( object )
    {
        object.name = model.id;
        object.position.x = model.x;
        object.position.y = model.y;
        object.position.z = model.z;
        scene.add( object );
    });
}

http://stackoverflow.com/questions/12896836/three-js-loading-order — 2pha, Feb 03 '16 at 20:56

Falk Thiele · Answer 1 · 2016-02-03T21:20:18.887

The easy to understand solution, use an intermediate function:

for ( var model in scenario_models ) {

    var obj = 'obj/male02/male02.obj',
    mtl = 'obj/male02/male02_dds.mtl';

    load( obj, mtl, model );

}

function load( url, mtl, model ) {

    var loader = new THREE.OBJMTLLoader();

    loader.load( url, mtl, function ( object ) {
        object.name = model.id;
        object.position.x = model.x;
        object.position.y = model.y;
        object.position.z = model.z;
        scene.add( object );
     });
}

Or the alternative solution using a closure:

for (var model in  scenario_models) {
    (function(x) {
      if (scenario_models.hasOwnProperty(x)) {
        var loader = new THREE.OBJMTLLoader();
        var obj = 'obj/male02/male02.obj',
        mtl = 'obj/male02/male02_dds.mtl';

        var model = scenario_models[x];

        loader.load( obj, mtl, function ( object ) {
            object.name = model.id;
            object.position.x = model.x;
            object.position.y = model.y;
            object.position.z = model.z;
            scene.add( object );
        });
      }
    })(model);
}

Tested both with Threejs r73.

How to load and manage many threejs object?

1 Answers1