CODEWITHSUNDEEP
javascriptthree.js
Vardan Betikyan
Vardan Betikyan

Reputation: 133

Three.js - How to load and store models in sequence which they've been called/loaded?

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]

Upvotes: 2

Views: 702

Answers (1)

Deep
Deep

Reputation: 549

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;
    }
}

Upvotes: 3

Related Questions