How to load multiple textures using the new THREE.TextureLoader

Question

How to load multiple textures with the new THREE.TextureLoader from Three.js?

At the moment, I am loading my textures as follows:

var texture1 = THREE.ImageUtils.loadTexture('texture1.jpg'); var texture2 = THREE.ImageUtils.loadTexture('texture2.jpg'); var texture3 = THREE.ImageUtils.loadTexture('texture3.jpg'); var texture4 = THREE.ImageUtils.loadTexture('texture4.jpg'); var texture5 = THREE.ImageUtils.loadTexture('texture5.jpg'); ... 

The Google Chrome Developer Tool gives the following warning:

THREE.ImageUtils.loadTexture is deprecated. Use THREE.TextureLoader () instead.

My attempt with the new THREE.TextureLoader:

 var loader = new THREE.TextureLoader(); loader.load('texture1.jpg',function ( texture1 ) {}); loader.load('texture2.jpg',function ( texture2 ) {}); loader.load('texture3.jpg',function ( texture3 ) {}); loader.load('texture4.jpg',function ( texture4 ) {}); loader.load('texture5.jpg',function ( texture5 ) {}); 

What am I doing wrong?

Textureloader

Answer 1

The loader returns the texture, actually quite simple:

 var loader = new THREE.TextureLoader(); var texture1 = loader.load('texture1.jpg'); var texture2 = loader.load('texture2.jpg'); 

You can see that the r74dev examples are already updated with the new syntax: https://github.com/mrdoob/three.js/blob/dev/examples/webgl_decals.html#L49-L51