Three.TextureLoader is not loading images files Three.TextureLoader is not loading images files google-chrome google-chrome

Three.TextureLoader is not loading images files


You're not calling it correctly. TextureLoader.load() returns immediately (with an empty, still to be populated THREE.Texture object ... it populates only when the request completes), and it doesn't wait for the image to be loaded.

Instead, as you can read in its documentation here you can feed it with callback methods which will be called when loading is complete, finished, or in progress.

Taking the example from the documentation:

// instantiate a loadervar loader = new THREE.TextureLoader();// load a resourceloader.load(    // resource URL    'textures/land_ocean_ice_cloud_2048.jpg',    // Function when resource is loaded    function ( texture ) {        // do something with the texture        var material = new THREE.MeshBasicMaterial( {            map: texture         } );    },    // Function called when download progresses    function ( xhr ) {        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );    },    // Function called when download errors    function ( xhr ) {        console.log( 'An error happened' );    });

If you want to wait for all the textures to be loaded, that's going to get more complicated. One way is to use Promises, here is an answer to a very similar question I've given before: Is there a way to wait for THREE.TextureLoader.load() to finish?