Associate loaded JSON files with a name for later access - three.js

Question

I would like to load multiple JSON files and control the visibility of their meshes. To achieve this, I associated them with their JSON file names. I got it working, but the solutions doesn't please me.
I modified the THREE.JSONLoader and passed a new parameter to the callback function. So with every new release of three.js, I would have to patch the three.js file again.
Here is my working solution (client side). See the new third parameter of loader.load(filename, callback, meshname).
Is there a better solution, which doesn't need a patched three.js library?
Thanks
// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
var loader = new THREE.JSONLoader();
var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
loader.load(jsonFileNames[i], function(geometry, meshName){
mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors}));
mesh.scale.set(0.2, 0.2, 0.2);
mesh.doubleSided = true;
scene.add(mesh);
meshes[meshName] = mesh;
}, meshName);
}
// ....
// Access their meshes
meshes[meshName].visible = true;

Answer 1

You could create a callback factory like below. It will work around the problem with closures when created inside loops.
function makeHandler(meshName) {
return function(geometry) {
mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors}));
mesh.scale.set(0.2, 0.2, 0.2);
mesh.doubleSided = true;
scene.add(mesh);
meshes[meshName] = mesh;
};
}
// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
var loader = new THREE.JSONLoader();
var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
loader.load(jsonFileNames[i], makeHandler(meshName));
}
// ....
// Access their meshes
meshes[meshName].visible = true;

Answer 2

A variant of Tapio's great answer. This variant avoids the need to create and manage the meshes object. It does this by creating each new mesh object with the desired object name directly in the made handler function. As before the desired name meshName for each mesh is defined by the user and passed to the handler. But then the new mesh is created with the desired name by using the javascript eval function.
function makeHandler(meshName) {
return function(geometry) {
material = new THREE.MeshPhongMaterial({vertexColors: THREE.FaceColors})
eval (meshName + "= new THREE.Mesh(geometry, material);" ); //***NEW ***
eval ( "var mesh = " + meshName +";" ); //*** NEW ***
mesh.scale.set(0.2, 0.2, 0.2);
mesh.doubleSided = true;
scene.add(mesh);
//*** NOT REQUIRED *** meshes[meshName] = mesh;
};
}
// Load the JSON files
var meshes = new Object();
var jsonFileNames = ['assembly/part1.json', 'assembly/part2.json', 'assembly/part3.json'];
for(var i = 0; i < jsonFileNames.length; i++){
var loader = new THREE.JSONLoader();
var meshName = jsonFileNames[i].split("/")[1].split(".")[0];
loader.load(jsonFileNames[i], makeHandler(meshName));
}
// ....
The various meshes can subsequently (when loading is completed) be referenced by their object names:-
// Access the meshes
//*** OLD *** meshes["part1"].visible = true;
//*** OLD *** meshes["part2"].visible = true;
//*** OLD *** meshes["part3"].visible = true;
part1.visible = true;//*** NEW ***
part2.visible = true;//*** NEW ***
part3.visible = true;//*** NEW ***