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

At the moment I'm loading my textures like this:

  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');
  ...

And Google chrome's developer tool give the following warning:

THREE.ImageUtils.loadTexture is being 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

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

At the moment I'm loading my textures like this:

  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');
  ...

And Google chrome's developer tool give the following warning:

THREE.ImageUtils.loadTexture is being 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

• javascript
• three.js

• are you getting any errors in the console? – Jaromanda X Commented Jan 26, 2016 at 13:46
• Your title is not specific enough + if you can try to provide a link to some code + I don't know three.js but I would suggest that you are missing something related with executing your code only after all textures have been loaded (callback problems). – AsTeR Commented Jan 26, 2016 at 13:47
• just re-read the question ... what is the actual nature of the problem – Jaromanda X Commented Jan 26, 2016 at 13:47
• Just take a look to this question stackoverflow.com/questions/14010165/three-js-textureloader – ADreNaLiNe-DJ Commented Jan 26, 2016 at 13:50
• Your not doing anything with the texture. – 2pha Commented Jan 26, 2016 at 15:46

2 Answers 2

The loader returns the texture, its actually pretty straightforward:

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

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

You could use promise to load all textures async like this way:

const loader = new THREE.TextureLoader();
const texture = Promise.all([loader.load('texture1.jpg'), loader.load('texture2.jpg')], (resolve, reject) => {
    resolve(texture);
}).then(result => {
    // result in array of textures
});