javascript - Three.js - 如何按调用/加载的顺序加载和存储模型？

Question

我正在尝试加载模型并将它们按照调用/加载的顺序放置在对象数组中。有时他们会被分配不同的号码，并以不同的顺序。

如何确保模型按照调用加载的顺序放置？

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]

Answer 1

您可以在加载之前存储模型需要出现在数组中的索引，并在加载模型后使用该索引。

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