How can I ensure that THREE.TextureLoader.load() has completed before proceeding?

Question

How can I ensure that THREE.TextureLoader.load() has completed before proceeding?

Currently, I am working on release R73 and my task involves populating an array with materials for later use. The successful loading of all materials in this array is crucial for their intended usage.

At the moment, I am iterating through a JSON information array and executing the following code for each element:

TLoader.load(
        BASE_ODB_URL + jsonMat.pic,
        function (texture) {
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(jsonMat.scaleu, jsonMat.scalev);
            Mat = new THREE.MeshLambertMaterial({
                    map : texture,
                    side : THREE.DoubleSide,
                    name : jsonMat.mname
                });
            THREEMatList.push(Mat);
        },
        function (xhr) {
        }, //onProgress
            function (xhr) {
            Mat = new THREE.MeshLambertMaterial({
                    color : 0xff0000,
                    side : THREE.DoubleSide,
                    name : jsonMat.mname
                });
            THREEMatList.push(Mat);
        } 
    )

The TLoader is instantiated at the beginning: variable TLoader = new THREE.TextureLoader();

If a material is not available when required, a fallback material is used as an error handling mechanism. Is there a method to ensure that .load() completes before proceeding?

javascript three.js

Answer 1

Answer №1

Instead of waiting for all assets to load in Threejs, you can use a custom LoadingManager to listen for specific subsets of assets being loaded. Threejs already has a callback for elements loaded via the LoadingManager:

import {TextureLoader, LoadingManager} from './three.module.js';

const getTextures = ()=> new Promise((resolve, reject)=>{
  const manager = new LoadingManager(()=>resolve(textures));
  const loader = new TextureLoader(manager);
  const textures = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
  ].map(filename=>loader.load(filename));
});

getTextures().then(result=>console.log("We received,", result,"!"));

Answer 2

Instead of waiting for all assets to load in Threejs, you can use a custom LoadingManager to listen for specific subsets of assets being loaded. Threejs already has a callback for elements loaded via the LoadingManager:

import {TextureLoader, LoadingManager} from './three.module.js';

const getTextures = ()=> new Promise((resolve, reject)=>{
  const manager = new LoadingManager(()=>resolve(textures));
  const loader = new TextureLoader(manager);
  const textures = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
  ].map(filename=>loader.load(filename));
});

getTextures().then(result=>console.log("We received,", result,"!"));

Answer 3

Answer №2

If you find yourself needing to load multiple textures before rendering your scene, a simple helper function can come in handy:

    /**
     *
     * @param {Array} textureSources - An array of strings representing the texture sources
     * @returns {Array} An array containing a Promise for each source 
     */
    function fetchTextures (textureSources) {
        const loader = new THREE.TextureLoader()
        return textureSources.map(textureSource => {
            return new Promise((resolve, reject) => {
                loader.load(
                    textureSource,
                    texture => resolve(texture),
                    undefined, // onProgress callback not supported from r84
                    error => reject(error)
                )
            })
        })
    }

To efficiently handle the loading of textures and catch any errors, wrap your code with Promise.all.

Here's an example:

const basePath = '../assets/textures/'
const src = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
].map(texture => basePath + texture)

Promise.all(fetchTextures(src))
    .then(textures => {
        // Create materials, mesh objects...
        // Render the scene
    })
    .catch(error => console.error(error))

Answer 4

If you find yourself needing to load multiple textures before rendering your scene, a simple helper function can come in handy:

    /**
     *
     * @param {Array} textureSources - An array of strings representing the texture sources
     * @returns {Array} An array containing a Promise for each source 
     */
    function fetchTextures (textureSources) {
        const loader = new THREE.TextureLoader()
        return textureSources.map(textureSource => {
            return new Promise((resolve, reject) => {
                loader.load(
                    textureSource,
                    texture => resolve(texture),
                    undefined, // onProgress callback not supported from r84
                    error => reject(error)
                )
            })
        })
    }

To efficiently handle the loading of textures and catch any errors, wrap your code with Promise.all.

Here's an example:

const basePath = '../assets/textures/'
const src = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
].map(texture => basePath + texture)

Promise.all(fetchTextures(src))
    .then(textures => {
        // Create materials, mesh objects...
        // Render the scene
    })
    .catch(error => console.error(error))

Answer 5

Answer №3

To tackle this issue, one effective approach is to utilize Promises. Promises are considered the way forward and it would have been more convenient if TextureLoader inherently returned a Promise. Nonetheless, it's important to note that IE11 requires a polyfill due to its lack of native promise support.

You can achieve the desired outcome by following a structure similar to this, where textureArray represents your JSON data stored in an iterable Array:

var allPromises = [];

textureArray.forEach( function( jsonMat ) {

    allPromises.push( new Promise( function( resolve, reject ) {

        TLoader.load(
           BASE_ODB_URL + jsonMat.pic,

           function( texture ) {
               // Success callback of TextureLoader
               texture.wrapS = THREE.RepeatWrapping;
               texture.wrapT = THREE.RepeatWrapping;
               texture.repeat.set( jsonMat.scaleu, jsonMat.scalev );
               var material = new THREE.MeshLambertMaterial({
                   map: texture,
                   side: THREE.DoubleSide,
                   name: jsonMat.mname
               });
               THREEMatList.push( material );

               // Notify the promise that it has completed
               resolve( material );
           },

           function( xhr ) {
               // Progress callback of TextureLoader
               // ...
           },

           function( xhr ) {
               // Failure callback of TextureLoader
               // Reject the promise with the failure
               reject( new Error( 'Could not load ' + jsonMat.pic ) );
           }
        );

    }));

});

Promise.all( allPromises )
    .then( function( arrayOfMaterials ) {
        // All textures are now loaded, and this array contains all the materials you created
    }, function( error ) {
        console.error( "Could not load all textures:", error );
    });

The concept here involves utilizing an overarching Promise to monitor the status of other individual promises. Each texture loading process is encapsulated within a Promise added to allPromises. Ultimately, the set of promises is evaluated for success or failure, providing insight into overall completion status.

It's essential to understand that Promise.all succeeds only when all textures are loaded; even a single failure will lead to overall failure. If more precise control is needed, consider using a Promise polyfill like RSVP.js. Alternatively, instead of rejecting the promise, resolving it and handling the result gracefully may be an option.

Answer 6

To tackle this issue, one effective approach is to utilize Promises. Promises are considered the way forward and it would have been more convenient if TextureLoader inherently returned a Promise. Nonetheless, it's important to note that IE11 requires a polyfill due to its lack of native promise support.

You can achieve the desired outcome by following a structure similar to this, where textureArray represents your JSON data stored in an iterable Array:

var allPromises = [];

textureArray.forEach( function( jsonMat ) {

    allPromises.push( new Promise( function( resolve, reject ) {

        TLoader.load(
           BASE_ODB_URL + jsonMat.pic,

           function( texture ) {
               // Success callback of TextureLoader
               texture.wrapS = THREE.RepeatWrapping;
               texture.wrapT = THREE.RepeatWrapping;
               texture.repeat.set( jsonMat.scaleu, jsonMat.scalev );
               var material = new THREE.MeshLambertMaterial({
                   map: texture,
                   side: THREE.DoubleSide,
                   name: jsonMat.mname
               });
               THREEMatList.push( material );

               // Notify the promise that it has completed
               resolve( material );
           },

           function( xhr ) {
               // Progress callback of TextureLoader
               // ...
           },

           function( xhr ) {
               // Failure callback of TextureLoader
               // Reject the promise with the failure
               reject( new Error( 'Could not load ' + jsonMat.pic ) );
           }
        );

    }));

});

Promise.all( allPromises )
    .then( function( arrayOfMaterials ) {
        // All textures are now loaded, and this array contains all the materials you created
    }, function( error ) {
        console.error( "Could not load all textures:", error );
    });

The concept here involves utilizing an overarching Promise to monitor the status of other individual promises. Each texture loading process is encapsulated within a Promise added to allPromises. Ultimately, the set of promises is evaluated for success or failure, providing insight into overall completion status.

It's essential to understand that Promise.all succeeds only when all textures are loaded; even a single failure will lead to overall failure. If more precise control is needed, consider using a Promise polyfill like RSVP.js. Alternatively, instead of rejecting the promise, resolving it and handling the result gracefully may be an option.

How can I ensure that THREE.TextureLoader.load() has completed before proceeding?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to iterate through form data utilizing serialization with jQuery and Ajax methods?

ng-if directive does not show data in AngularJS

Exported excel files cannot contain multiple footer rows in Datatable

The button with type Submit inside the form is failing to trigger the Form Submit Event

A guide on invoking a JavaScript function after receiving a response from an AJAX request

Customize Google Chrome to display a vibrant splash screen instead of a boring white blank page when

Confusion Arises When Joomla Buttons Clash

Determining the dimensions of a div once it has completed loading

Tips for effectively interpreting a json string

Aligning pixels on a webgl canvas to correspond with the faces of a mesh

Unexpected behavior observed with negated character: ? ^

Toggle the visibility of a div using jQuery repeatedly

retrieve information from various components identified by the common class name by employing ajax requests

Accessing information from Next.js API endpoint in a Next.js web application

What is the best way to retrieve router parameters within a JSX component?

Unable to load page redirection

Click on the button to reveal the hidden content within the div, and then smoothly scroll down to view

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

Combine two entities to create a new entity that mirrors the structure of the first entity

A guide on retrieving values from programmatically created input elements in Java