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?