List of models loaded in Three.js

Question

List of models loaded in Three.js

Within this block of code, my goal is to load multiple 3D models using the asynchronous .load method.

async function loadModels(lights, roomWidth, roomHeight) {
    // Initializing an empty array to store the loaded models
    models = []
    
    /* Loading the first model: "Sci-Fi Light 11" */
    const loader = new GLTFLoader(loadingManager);
    loader.load('./models/scifi_light_11.glb', function (gltf) {
        // Transforming and positioning the model in various rooms
        gltf.scene.scale.set(0.02, 0.02, 0.02)
        gltf.scene.rotateZ(-0.7 * Math.PI);
        gltf.scene.receiveShadow = true;
        gltf.scene.castShadow = true;
        // Code snippet to position the model in different rooms goes here...
        
        // Adding the loaded model to the scene and the models array
        scene.add(gltf.scene);
        models.push(gltf);
    });
    
    /* Loading the second model: "Terminal" */
    const loader1 = new GLTFLoader(loadingManager);
    // Additional description for the source of the model goes here...
    loader1.load('./models/terminal/scene.gltf', function (gltf) {
        // Similar process of transforming, positioning, and adding the model to the scene
        // Code for handling the second model goes here...
    });

    // The loading process for other models continues similarly...

}

It's evident that the current approach of populating the models list isn't effective. How can I modify this function to return a Promise containing all the loaded models?

javascript three.js

Answer 1

Answer №1

To start, the first step is to create a promisified wrapper around GLTFLoader.load by following this link.

/**
 * Load a GLTF resource in a promisified manner.
 * @param {string} path The path/URL of the .gltf or .glb file.
 * @param {THREE.LoadingManager} manager The loading manager to utilize. Defaults to THREE.DefaultLoadingManager.
 * @returns {Promise<GLTF>}
 */
function loadGltf(path, manager = THREE.DefaultLoadingManager) {
  return new Promise((resolve, reject)=>{
    const loader = new GLTFLoader(manager);
    loader.load(
      path, 
      // Resolve with gltf argument from onComplete callback
      (gltf) => { resolve(gltf); },
      // Use null for onProgress as ES2015 Promises do not provide progress reporting
      null,
      // Reject with error argument from onError callback
      (err) => { reject(err); }
    );
  });
}

Now, you can create promises for each GLTF.

const p1 = loadGltf( "room1.glb" ).then( 
    /* Handle room1 operations and specify the desired result */ );
const p2 = loadGltf( "room2.glb" ).then( /* ditto */ );

Finally, initialize the array and use Promise.all to organize it.

const models = []
// Use spread operator while pushing
Promise.all([p1, p2]).then( (gltfs) => models.push( ...gltfs );

The gltfs parameter in the then function call will contain the results of p1, p2, etc., in the same order they were added to all(). You don't necessarily have to return the entire GLTF object from p1, p2, etc.; if each GLTF reduces to a single object and its children, you could pass out something like gltf.scenes[0].children[0]. Just be mindful of what is being returned from the promises when accessing them through the array.

It's important to consider that the array may not be fully populated by the time your application reaches the animate() function (or any other attempt to access the array contents). This can be addressed by either chaining another then() call before animate(), or using a guard statement like if(models.length) { ... } to handle array access.

Answer 2

To start, the first step is to create a promisified wrapper around GLTFLoader.load by following this link.

/**
 * Load a GLTF resource in a promisified manner.
 * @param {string} path The path/URL of the .gltf or .glb file.
 * @param {THREE.LoadingManager} manager The loading manager to utilize. Defaults to THREE.DefaultLoadingManager.
 * @returns {Promise<GLTF>}
 */
function loadGltf(path, manager = THREE.DefaultLoadingManager) {
  return new Promise((resolve, reject)=>{
    const loader = new GLTFLoader(manager);
    loader.load(
      path, 
      // Resolve with gltf argument from onComplete callback
      (gltf) => { resolve(gltf); },
      // Use null for onProgress as ES2015 Promises do not provide progress reporting
      null,
      // Reject with error argument from onError callback
      (err) => { reject(err); }
    );
  });
}

Now, you can create promises for each GLTF.

const p1 = loadGltf( "room1.glb" ).then( 
    /* Handle room1 operations and specify the desired result */ );
const p2 = loadGltf( "room2.glb" ).then( /* ditto */ );

Finally, initialize the array and use Promise.all to organize it.

const models = []
// Use spread operator while pushing
Promise.all([p1, p2]).then( (gltfs) => models.push( ...gltfs );

The gltfs parameter in the then function call will contain the results of p1, p2, etc., in the same order they were added to all(). You don't necessarily have to return the entire GLTF object from p1, p2, etc.; if each GLTF reduces to a single object and its children, you could pass out something like gltf.scenes[0].children[0]. Just be mindful of what is being returned from the promises when accessing them through the array.

It's important to consider that the array may not be fully populated by the time your application reaches the animate() function (or any other attempt to access the array contents). This can be addressed by either chaining another then() call before animate(), or using a guard statement like if(models.length) { ... } to handle array access.

List of models loaded in Three.js

Answer №1

Similar questions

After zooming, are mouse coordinates pointless?

Guide on how to prevent Paste (Ctrl+V) and Copy (Ctrl+C) functionalities in a TextField within MaterialUI

Drag and Drop in Angular with Dragula - Trigger Confirmation on Drop Event

Is it possible to remove Sprites from a three.js scene?

Ensure Your Forms Are Error-Free with Jquery Form Validation

Tips for adding information to a PHP file

Stripping out only the position attribute using jQuery

PHP displays the array returned by Ajax as "[object Object],[object Object]"

What is the best way to enable import and require support for npm modules?

What is the best way to utilize the ajax factory method in order to establish a $scoped variable?

Executing child processes in the Mean Stack environment involves utilizing the `child_process`

IFrame issue: Page is constantly refreshing when on iframe source

What is the best method to retrieve JSON data from a different domain?

The error message "TypeError: dom.getElementsByTagName is not a function in Node.js" indicates

AngularJS factory or filter failing to update properly

Turn off automatic zooming for mobile device input

Uploading videos to a single YouTube channel using the YouTube Data API

What is the process for updating the internal TypeScript version in VS Code?

"Encountered a duplication issue while attempting to create a unique name by combining input from the textbox with the original file name using a combination of

Tips for showing only the date (excluding time) from a get operation in javascript (specifically using node js and mysql)