three.js load multiple objects asynchronous issue

Question

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

Example 1 what am getting now

Example 2 what i want

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?

yes because am getting geometry and materials from other loops,this is my code only to add the model to the scene, can you understand my situation ? — Jothi Kannan, Sep 22 '14 at 04:39
Could you maybe show us these loops? Global variables hardly ever make sense. Where are all these `obj_*` variables declared? — Bergi, Sep 22 '14 at 10:13
Hi @Bergi you can check the full code here http://pastebin.com/4QWymQ79 — Jothi Kannan, Sep 22 '14 at 12:16
Sounds like the [classic closure in loop scope problem](http://stackoverflow.com/q/750486/1048572). However, that code is too long and convoluted to tell for sure. — Bergi, Sep 22 '14 at 13:18
No, as I said I don't know your code and won't read into it. You know your code, so: Was my guess correct and is it a scope issue? — Bergi, Sep 22 '14 at 14:07
Does `console.log(object);` works for you inside loader callback? — antyrat, Sep 22 '14 at 22:01
"model = new THREE.Object3D();" why do you create a extra 3DObject? model = object. .... or just use object all along until you get to the line scene.add(object). — Benedikt, Sep 24 '14 at 08:39
Hi @Benedikt i need all the models on the different places,so i used `model = new THREE.Object3D();` to create the temporary model and after add it into the scene i `used scene.add(model);` — Jothi Kannan, Sep 24 '14 at 09:25

score 1 · Answer 1 · answered Sep 22 '14 at 23:22

1

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);

answered Sep 22 '14 at 23:22

antyrat

27,479
9
75
76

thanks for the answer @antyrat , but it doesn't make any sense on the result, still am getting the same result – Jothi Kannan Sep 23 '14 at 04:39
yes on the console am getting like `Object { id=41, uuid="B11412C6-2A91-4F47-9133-AE476B25A087", parent={...}, more...} 3d_tool...proid=3 (line 801) Object { id=43, uuid="8453B8A7-1193-454E-B91F-5462BDEC0CA1", parent={...}, more...} 3d_tool...proid=3 (line 801)` – Jothi Kannan Sep 23 '14 at 04:45
@JothiKannan and can you show how do you call `load_file` and where? – antyrat Sep 23 '14 at 09:30
hi @antyrat my full code is here http://pastebin.com/NNUByWGP, can you look at here? – Jothi Kannan Sep 23 '14 at 09:45
1

Hi @JothiKannan I'm looking on it, don't worry, I will try to help you ;) – antyrat Sep 23 '14 at 13:50
Hi @antyrat got any solution for this issue? – Jothi Kannan Sep 24 '14 at 10:28

score 1 · Accepted Answer · edited Apr 12 '17 at 07:31

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;
   ...
}

edited Apr 12 '17 at 07:31

Community

1
1

answered Sep 24 '14 at 15:44

Alex

3,264
1
25
40

Hi @Alex i tried all the methods and none of them are not working to me, – Jothi Kannan Sep 25 '14 at 11:16
Hi @JothiKannan forget about the *old answer*, I think the problem is that you re-use the global variable `model` for every `add.scene`, but when you create and assign a `new THREE.Object3d` to `model`, you're **destroying** the old one already assigned (it become garbage for the garbage collector), let me know if isn't clear, I can try to set up a simple test. – Alex Sep 25 '14 at 11:43
am not familiar with js,so can you show me a example ? – Jothi Kannan Sep 25 '14 at 11:50
Ok let me some time, I'll let you know here. – Alex Sep 25 '14 at 11:52
@JothiKannan seem re-using the global isn't an issue at least with three.js version r68 (are you using same version?) [see this fiddle](http://jsfiddle.net/x660fxcg/), may you put your json model .js online somewhere so I can test the load_file? – Alex Sep 25 '14 at 12:09
@JothiKannan or copy it to pastebin I'll use a local server. – Alex Sep 25 '14 at 12:18
@JothiKannan I tried with a simple cube from blender in the while, re-created your situation, **the problem are the globals** (obj_x & family), the object is loaded two times but with same position, take a look to here http://pastebin.com/RXSU9X3f in particular near `comment this` and `uncomment this` – Alex Sep 25 '14 at 12:55
yes @Alex i found it by today morning, but i doesn't get right direction to move further, what is your suggestion here ? – Jothi Kannan Sep 25 '14 at 13:05
@JothiKannan you should really review your code to avoid globals. I didn't took a look to your full code, isn't clear to me why you need variables like `obj_x`, if a model's `x` is needed from a function add an argument `myobject` then use `myobject.x` – Alex Sep 25 '14 at 13:33
thanks man, really appreciate your effort on this, finally it worked if i use `model.position.set(x,y,z);` this :))) – Jothi Kannan Sep 25 '14 at 13:52
You're welcome. I know it work but you'll end up with some inconsistency if you continue to use `obj_x` in other functions. Warned ;) have fun – Alex Sep 25 '14 at 13:56
am reading your link, and may i know how my global `obj_x` is evil on here, bcoz i doesn't used this `obj_x` anywhere on code except `obj_x=x` here, just give me hint that would be useful to me in the future – Jothi Kannan Sep 25 '14 at 14:01

three.js load multiple objects asynchronous issue

2 Answers2

Linked