THREE.JS loading an array of STL Meshes - three.js

Question

So, I have a data base which contains a file reference column and any references to sub STL files that are needed for it. I can load one or two models into a THREE.js viewer so all of that works without issue but when I load an array of four or so things start getting hairy and the assigned Mesh Id's start to get a bit odd and multiple mesh's get the same ID. So since it works with two files I know the array kind of works and is passing data correctly.
I was wondering if my loader.load method needs to be tweaked to wait for the mesh to load and configure. Otherwise I have no idea what my problem is.
The first part here calls my createMesh function and asks for a mesh in return. As I said this seems to work for 1 or 2 meshes at a time.
'if (indSTLCol.length>1 ){ for (item in indSTLCol){
getTheName="3dfiles\\"+fRSplit[parseInt(this.id)];
getTheName = getTheName.substring(0,getTheName.length-7);
getTheName=getTheName+indSTLCol[item]+".stl";
meshArr[item]=createMesh(getTheName);
}
}
else{
getTheName="3dfiles\\"+fRSplit[parseInt(this.id)];
console.log("in ind collection"+ getTheName);
console.log ("Added to Array"+meshArr[0].id);
meshArr[0]=createMesh(getTheName);
}
console.log("BREAK");
divId=this.id;
fSizeX=700;
fSizeY=500;
}'
This part creates the mesh:
'function createMesh(getTheName){
loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
geometry = event.content;
mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, 0 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 2, 2, 2 );
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.id=getTheName;
scene.add(mesh);
/* for (a in scene.children){
console.log("Child Name "+ scene.children[a].id+" " + a);
} */
//console.log("Mesh ID# " + mesh.id+" Mesh info: " + mesh);
return mesh;
} );
mesh=loader.load( getTheName );
return mesh;
}'
I am terrible at explaining my issues so if you need more info please just ask and I can try to explain better.
Also, I iterated through scene.children to check for Id's and it works for two and below meshes. I am starting to be convinced that it takes things are happening and ID's are being assigned before the geometry is being created.
function createMeshArr(){
for (var a in scene.children){
if (scene.children[a] instanceof THREE.Mesh){
smeshArr[a]=scene.children[a];
}
}
return smeshArr;
Ok so this seemed to work and not sure why:
function createMesh(getTheNames){
loader = new THREE.STLLoader();
mesh=loader.load( getTheNames);
loader.addEventListener( 'load', function ( event ) {
var material = new THREE.MeshLambertMaterial({color: 'blue' });
var geometry = event.content;
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, 0 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 2, 2, 2 );
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.id=getTheNames;
scene.add(mesh);
return mesh;
} );
return mesh;
}

Answer 1

Here is a simple example to use the callback to force the loader to wait until the previous load is completed.
var callback = function ( geometry ) {
var myMesh = new THREE.Mesh( geometry, basicMat );
meshArray.push(myMesh);
myScene.add( myMesh );
i++;
if (i < numberOfMeshesToLoad) // put the next load in the callback
myLoader.load( filename[i], callback ) ;
};
i = 0;
myLoader.load( filename[i], callback ); //initial loader call