three.js load multiple objects asynchronous issue

问题

am loading multiple models on the same time to a scene, but it fails to load all the models, it only loading one model on the scene

For example am having a building scene with the multiple objects like chairs, toys and so on inside that building, while loading those objects the only one object is loading, but somehow if i do a alert on end of the function all the models are loading

Image1 what am getting now, Image2 what actually i want

my code is follows

function load_file(floor_number,x,y,z,width,height,rotation,angle,file)
{       
obj_x=x;
obj_y=y;
obj_z=z;
obj_width=width;
obj_height=height;
obj_rotation=rotation;
var object_material = new THREE.MeshBasicMaterial({                 
          color: 0xd6d6d6,  
          traansparent : true,
          opacity   : -2.5,
          side: THREE.DoubleSide            
      });       
var   loader = new THREE.JSONLoader();      
loader.load("uploads/accessories/3d/code/3dfile_"+file+".js",
          function(geometry, object_material) 
          {

              var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(object_material));
              console.log(object);
              model = new THREE.Object3D();

              model.add(object);    
              model.position.set(obj_x,obj_y,obj_z);        
              model.scale.set(obj_width,obj_height,obj_rotation);   
              model.opacity =2;
              model.rotation.y = 600; 
              model.duration = 12000;
              model.mirroredLoop = true;
              model.castShadow = true;
              model.receiveShadow = true;
              scene.add(model);                         
          }
      );        

     // alert('hi'); if i remove this comment second model is loading perfectly
return true;                    
}

also tried to load the object's by id using Object3D.getObjectById() this is also fails i know this is about the asynchronous problem, but i can't get ride of this, any help on this?

回答1:

The problem are the globals.

Here a nice reading about Why is Global State so Evil?.

update

I played around a bit with a code similar to your, and I see now what could be what it seem a problem, but it isn't really, you can use an approach like this:

/* object declaration and initialization on load completed */
var model1;
load_file('object1', function(model) {
   model1 = model;
   model1.position.x = -2;
});
... 
function laad_file(file, on_load_complete) {
   ...
   loader.load("http://localhost/"+file+".js",  function(geometry, object_material)  {
      ...
      scene.add(model);
      /* call the callback to initialize your object */
      if (on_load_complete !== undefined)
         on_load_complete(model);
   });
   ...
}

render() {
   ...
   if (model1 !== undefined) 
      model1.rotation.x += 0.1;
   ...
}

回答2:

Seems like your problem is that renderer not firing after model added to the scene. Try to call it after model added to the scene at your callback function:

scene.add(model); 
renderer.render(scene, camera);

来源：https://stackoverflow.com/questions/25945301/three-js-load-multiple-objects-asynchronous-issue

标签

javascript

jquery

asynchronous

three.js