I'm trying to load the models and place them in an object array in the order they've been called/loaded. Sometimes they get assigned a different number, and in a different sequence.
How do I make sure the models are placed in the order which they're called to load?
var models = {
tile: [],
building: [],
character: []
};
const loader = new GLTFLoader();
function loadGLTF(path, type){
loader.load(
path,
(gltf) => {
gltf.scene.traverse( ( node ) => {
if( node.material ) {
node.material.metalness = 0;
}
if ( node.isMesh ) {
if(type == 'tile'){
node.castShadow = false;
}
else {
node.castShadow = true;
}
node.receiveShadow = true;
}
} );
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Object
models[type].push(gltf);
loading++;
checkLoad();
},
(xhr) => {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
(error) => {
console.log( 'Error: ' + error);
}
);
}
/**Load Models**/
//Tiles
loadGLTF('resources/models/tiles/tile_000.glb', 'tile'); //Place in tile[0]
loadGLTF('resources/models/tiles/tile_001.glb', 'tile'); //Place in tile[1]
//Buildings
loadGLTF('resources/models/buildings/building_000.glb', 'building'); //Place in building[0]
loadGLTF('resources/models/buildings/building_001.glb', 'building'); //Place in building[1]
loadGLTF('resources/models/buildings/building_002.glb', 'building'); //Place in building[2]
loadGLTF('resources/models/buildings/building_003.glb', 'building'); //Place in building[3]
loadGLTF('resources/models/buildings/building_004.glb', 'building'); //Place in building[4]
loadGLTF('resources/models/buildings/building_005.glb', 'building'); //Place in building[5]
loadGLTF('resources/models/buildings/building_006.glb', 'building'); //Place in building[6]
loadGLTF('resources/models/buildings/building_007.glb', 'building'); //Place in building[7]
loadGLTF('resources/models/buildings/building_008.glb', 'building'); //Place in building[8]
//Character
loadGLTF('resources/models/characters/Male.glb', 'character'); //Place in character[0]
You can store the index of where the model needs to appear in the array before loading and use that index after loading the model.
const loadingCount = {
tile: 0,
building: 0,
character: 0,
}
function loadGLTF(path, type){
const modelIndex = loadingCount[type];
loadingCount[type] += 1;
loader.load(
path,
(gltf) => {
models[type][modelIndex] = gltf;
}
}