How loading models concurrently?

Questions
1

Hello. I need to upload a model of a helicopter and a ship at the same time.

2

Wait while all models will be loaded and then run scene.

let loaded=0;
const loader = new GLTFLoader().setPath( 'models/' );


loader.load( 'ship.gltf', async function ( gltf ) {
scene.add(gltf.scene);
loaded++;
if(loaded==2){ animation(); }			
} );


loader.load( 'helicopter.gltf', async function ( gltf ) {
scene.add(gltf.scene);
loaded++;
if(loaded==2){ animation(); }			
} );
1 Like
3

It’s no working.
In the console loaded = 1.

    // Model
    
    let loaded = 0;

    const loader = new GLTFLoader();

    loader.load("model/CargoshipBLEND.glb", (gltf) => {
        const modelShip = gltf.scene;
        modelShip.scale.set(10, 10, 10)
        scene.add(modelShip);
        loaded++;

    });

    let mixer = null;

    loader.load("model/Heli_bell.glb", (gltf) => {
        const model = gltf.scene;
        model.scale.set(0.5, 0.5, 0.5);
        model.position.set(2, 25, 0.5);

        mixer = new THREE.AnimationMixer(model);
        const action1 = mixer.clipAction(gltf.animations[0]);
        const action2 = mixer.clipAction(gltf.animations[1]);
        const action3 = mixer.clipAction(gltf.animations[3]);
        action1.setLoop(THREE.LoopOnce);
        action1.clampWhenFinished = true;
        action1.enable = true;
    
        scene.add(model);

        loaded++;
        console.log(loaded)
        if(loaded==2){ 
            action1.play();
            action2.play();
            action3.play();
         }
    });
4

Change

    loader.load("model/CargoshipBLEND.glb", (gltf) => {
        const modelShip = gltf.scene;
        modelShip.scale.set(10, 10, 10)
        scene.add(modelShip);
        loaded++;

    });

to

  loader.load("model/CargoshipBLEND.glb", (gltf) => {
        const modelShip = gltf.scene;
        modelShip.scale.set(10, 10, 10)
        scene.add(modelShip);
        loaded++;
console.log(loaded)
        if(loaded==2){ 
            action1.play();
            action2.play();
            action3.play();
         }
    });
5

I need the sea, sky, ship, and helicopter to load as a single unit. In html&css, this could be done using visibility: hidden; changing after a while via js. How to solve this problem on three.js I do not know.

6

In my opinion, it is better to use Loader.loadAsync and Promise.all:

let helicopter, ship;

Promise.all([
    loader.loadAsync( 'ship.gltf'),
    loader.loadAsync( 'helicopter.gltf')
]).then(objects => {
    ship = objects[0].scene;
    helicopter = objects[1].scene;
    scene.add(ship, helicopter);
    //some other code
})
5 Likes
7

Great! Thank you so much.

8

Or even:

scene.add((await loader.loadAsync( 'ship.gltf')).scene,
          (await loader.loadAsync( 'helicopter.gltf')).scene);
1 Like