THREE.js Model position Issue

Question

I am trying the following code:

var loader = new THREE.JSONLoader();
var onGeometry = function(geom) {
var tooth = new THREE.Mesh( geom, new THREE.MeshFaceMaterial());
tooth.position.set(xpos,ypos,0);
teeth.push(tooth);
scene.add(tooth);
xpos+=10;
};
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);

The models does not appear on screen in the order in which I load them which in my case is necessary since I am positioning objects depending on the order in which I load them. Same was the issue when I used OBJLoader and used its callback to add the objects in to scene and store them in array. So, how can I achieve this, How can I display multiple object on the screen positions that I can specify. Any Suggestion?

Answer 1

Create a callback factory for which you can pass the desired position and have it saved in a closure:

function getGeomHandler(posx) {
  return function(geom) {
    var tooth = new THREE.Mesh(geom, new THREE.MeshFaceMaterial());
    tooth.position.set(posx, posy, 0);
    teeth.push(tooth);
    scene.add(tooth);
  };
}
var posx = 123;
var loader = new THREE.JSONLoader();
loader.load('js/JsonModels/teeth1.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/tooth2.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/teeth1.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/tooth2.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/teeth1.js', getGeomHandler(posx)); posx += 10;
loader.load('js/JsonModels/tooth2.js', getGeomHandler(posx)); posx += 10;