Routine to load multiple gltf models at once

Questions
, , ,
1

Hey there,

I am having trouble to build a script which loads multiple gltf-models at once.

My problem is the interaction between threejs loader manager, gltf loader and loadasync.

I understood that the loader manager is like a helper which preprocesses the incoming data and have useful callbacks for tracking the progress.

But what is different between this

loaderManager.onStart
loaderManager.onLoad
loaderManager.onProgrss
loaderManager.onError

and this

gltfLoader.load(modelPath,onLoad,onProgress,onError);

In combination with this qoute :

I can’t wrap my head around a working solution. Maybe I am all wrong from the beginning by storing the model path and position in a mysql database and parsing it like so :

  1. PHP - MySql query to get path of the models, the positions and echo each sql result as script tag with type json
  2. JS - Json parse each script tag, pass these parameters (path, position) to gltf loader

This is my loader function :

function model_loader(scene, model, x, y, z, rx, ry, rz, r, g, b) {
  var object;

  loading_manager.onStart = function (item, loaded, total) {
    console.log(
      "Started loading file: " +
        item +
        ".\nLoaded " +
        loaded +
        " of " +
        total +
        " files."
    );
  };
  loading_manager.onProgress = function (item, loaded, total) {
    // console.log(item, loaded, total);
    console.log(
      "Loading file: " +
        item +
        ".\nLoaded " +
        loaded +
        " of " +
        total +
        " files."
    );
  };
  loading_manager.onLoad = function () {
    console.log(
      "Loaded all resources for %c" +
        model +
        " in " +
        (Date.now() - timerStart),
      "color: green;"
    );
  };
  loading_manager.onError = function (e) {
    console.log("loading manager error : " + e);
  };

  // load and add model to scene
  gltf_loader.load(
    model,
    function (gltf) {
      object = gltf.scene;

      // console.log(gltf);

      object.traverse((node) => {
        reset_mesh(node);
        reset_material(node);
        reset_light(node);
      });

      object.position.x = x;
      object.position.y = y;
      object.position.z = z;

      scene.add(object);

      return scene;
    },
    onProgress,
    onError
  );
}

When just replace

gltf_loader.load(...

with that

gltf_loader.loadAsync(...

then I get a traverse error.

Would it be better to push each parsed result in an array and then use something like this

async function loadBirds() {
  const loader = new GLTFLoader();

  const [parrotData, flamingoData, storkData] = await Promise.all([
    loader.loadAsync('/assets/models/Parrot.glb', onLoad),
    loader.loadAsync('/assets/models/Flamingo.glb', onLoad),
    loader.loadAsync('/assets/models/Stork.glb', onLoad),
  ]);
...

https://discoverthreejs.com/book/first-steps/load-models/

I am lost, please help!