Objects load in different position each time I refresh the page - Three.js - OBJMTLloader

Question

I load some objects in my scene:

var objectInfo = [
{"objURL":"3D/Barrel/barrel.obj", "mtlURL":"3D/Barrel/barrel.mtl","xPOS":0,"yPOS":-2,"zPOS":-260,"xROT":0,"yROT":0,"zROT":0,"scaleX":0.6,"scaleY":0.6,"scaleZ":0.6},
{"objURL":"3D/Sofa/sofa.obj", "mtlURL":"3D/Sofa/sofa.mtl","xPOS":0,"yPOS":0,"zPOS":0,"xROT":0,"yROT":4,"zROT":0,"scaleX":1,"scaleY":1,"scaleZ":1},
{"objURL":"3D/Lamp/lamp.obj", "mtlURL":"3D/Lamp/lamp.mtl","xPOS":210,"yPOS":-20,"zPOS":10,"xROT":0,"yROT":50,"zROT":0,"scaleX":1,"scaleY":1,"scaleZ":1},
];

for (var i = 0; i < objectInfo.length; i++) {

                      loader=new THREE.OBJMTLLoader();

                      loader.addEventListener('load', function (event) { //callback f. to load .obj and .mtl

                          obj = event.content;

                          var c=count(); //just an external counter because i is not defined in here

                          obj.position.set(objectInfo[c].xPOS,objectInfo[c].yPOS,objectInfo[c].zPOS);
                          obj.rotation.x=objectInfo[c].xROT;
                          obj.rotation.y=objectInfo[c].yROT; 
                          obj.rotation.z=objectInfo[c].zROT;

                          obj.scale.set(objectInfo[c].scaleX, objectInfo[c].scaleY, objectInfo[c].scaleZ);

                          scene.add(obj);

                          OBJS[c]=obj; 

                      });

                      loader.load(objectInfo[i].objURL,objectInfo[i].mtlURL);

 }

But when I hard refresh the page (F5, Chrome) without having changed anything , the objects are in different position than before. When I hit again the F5, the objects are in their old position. ANd this happens alla the time and it is random where the objects will be.

What is the problem? Please answer because I have made much research before posting.

EDIT: alternative implementation without counter() : (still not working)

  for (var i = 0; i < objectInfo.length; i++) {

                      loader=new THREE.OBJMTLLoader();

                      loader.addEventListener('load', function (event) { //callbac f. to load .obj and .mtl

                          obj = event.content;                      

                          var objectInfo2=objectInfo.pop();

                          obj.position.set(objectInfo2.xPOS,objectInfo2.yPOS,objectInfo2.zPOS);
                          obj.rotation.x=objectInfo2.xROT;
                          obj.rotation.y=objectInfo2.yROT; 
                          obj.rotation.z=objectInfo2.zROT;

                          obj.scale.set(objectInfo2.scaleX, objectInfo2.scaleY, objectInfo2.scaleZ);

                          scene.add(obj);

                          // OBJS[c]=obj; 

                      });

                      loader.load(objectInfo[i].objURL,objectInfo[i].mtlURL);

    }

Also, not only the position attributes are randomly changed but also scale etc.

It seems like the object lamp and barrel are randomly interchanging positions. I also tried using pop() and not a counter to extract the data from the objectInfo[] but again the same problem. — ovelix123, May 11 '14 at 08:48

JAre · Accepted Answer · 2014-05-11T15:26:20.797

1

load events will fire in the random order.

--edit--

I think the problem is related to the counter function call because it assumes that the first call is from the first(in the array) object load event callback.

OBJMTLLoader has load: function ( url, mtlurl, onLoad, onProgress, onError )

you can pass onLoad with the right index.

edited May 11 '14 at 15:26

answered May 11 '14 at 13:05

JAre

4,666
3
27
45

2

While this is a true statement and explains the behavior the OP is seeing it does not really help them solve their problem; could you expand on this a bit? – Michael Edenfield May 11 '14 at 13:26
As I commented on my Post above, I removed the counter() and I used pop() to extract the data of the objects and still problem. It is possible that the problem has something to do with synchronization (as the objects randomly change positions with each other) but I don't now what it is. – ovelix123 May 11 '14 at 14:22
OK I understand what you say and you might be right. How can i recognize the objects inside the callback function ? I used obj.name (i use it later to identify which object was clicked and it works) but it didn't work (alert() is always blank). I also tried obj.id and it alerted random numbers like 14 9 11 etc. Which attribute of obj could I check? thanks – ovelix123 May 11 '14 at 14:58
I also tried to create an array of OBJMTLloaders and add eventListeners to each one and still not working. – ovelix123 May 11 '14 at 15:00
@ovelix123 i extended the answer and removed unnecessary comments. – JAre May 11 '14 at 15:57
my OBJMTLloader has : load: function ( url, mtlfileurl, options ) {..} . Can you please explain how can I pass as a parameter an index? I think this will solve the problem. – ovelix123 May 11 '14 at 17:00
@ovelix123 Use closure mechanic http://stackoverflow.com/questions/111102/how-do-javascript-closures-work – JAre May 11 '14 at 18:10

Objects load in different position each time I refresh the page - Three.js - OBJMTLloader

1 Answers1