Can't load more than 14 textures with THREE.TextureLoader

Hello. I use TextureLoader to load textures from prepared list. I use Promise.all to wait untill all the textures are loaded.

List looks like [TCom_Concrete_Polished, TCom_Plaster_Plain, TCom_Wall_BrickBeige1_0].

With this list and object of texture names i find out which textures i have for the chosen material.
export const wallMaterials = {
‘TCom_Concrete_Polished’: {
‘map’: ‘TCom_Concrete_Polished_512_albedo.jpg’,
‘normalMap’: ‘TCom_Concrete_Polished_512_normal.jpg’,
‘roughnessMap’: ‘TCom_Concrete_Polished_512_roughness.jpg’
},
‘TCom_CorrugatedPlates4’: {
‘map’: ‘TCom_CorrugatedPlates4_512_albedo.jpg’,
‘normalMap’: ‘TCom_CorrugatedPlates4_512_normal.jpg’,
‘roughnessMap’: ‘TCom_CorrugatedPlates4_512_roughness.jpg’
},
‘TCom_Plaster_Plain’: {
‘map’: ‘TCom_Plaster_Plain_512_albedo.jpg’,
‘normalMap’: ‘TCom_Plaster_Plain_512_normal.jpg’,
‘roughnessMap’: ‘TCom_Plaster_Plain_512_roughness.jpg’
},
‘TCom_StoneStripWall’: {
‘map’: ‘TCom_StoneStripWall_512_albedo.jpg’,
‘normalMap’: ‘TCom_StoneStripWall_512_normal.jpg’,
‘roughnessMap’: ‘TCom_StoneStripWall_512_roughness.jpg’
},
‘TCom_Wall_BrickBeige1_0.8x0.8’: {
‘map’: ‘TCom_Wall_BrickBeige1_0.8x0.8_512_albedo.jpg’,
‘normalMap’: ‘TCom_Wall_BrickBeige1_0.8x0.8_512_normal.jpg’,
‘roughnessMap’: ‘TCom_Wall_BrickBeige1_0.8x0.8_512_roughness.jpg’
},
}

Use this func inside promise all:
export function textureLoader(url) {
const loader = new TextureLoader();
return new Promise((resolve, reject) => {
loader.load(url, data => {
resolve(data);
}, null, reject);
});
}

And here the main func:
async function loadTexturesFromList(textureSet) {

	for(const texturePack in allTextures) {
	  for(const texture in allTextures[texturePack]) {
		allTextures[texturePack][texture].dispose();
	  }
	}

	const texturePacks = {};

	const promises = [];
	
	textureSet.forEach(textureName => {

	  if (textureName) {

		const texturePack = {};

		for(const texture in wallMaterials[textureName]) {
	  
		  texturePacks[textureName] = texturePack;
		  promises.push(textureLoader('/Materials/Walls/' + wallMaterials[textureName][texture])
		  .then((loadedtex) => {
			console.log(loadedtex);
			loadedtex.wrapS = RepeatWrapping;
			loadedtex.wrapT = RepeatWrapping;
			loadedtex.repeat.set(1, 1);
			loadedtex.colorSpace = LinearSRGBColorSpace;
			texturePack[texture] = loadedtex;
		  })
		  .catch((e) => {
			console.log(e)
		  })
		  );
		}
	  }
	});

	await Promise.all(promises);

	return texturePacks;
  }

But i got an error when promises array length == 15. The 15th texture gives an error. But if i have less textures everything is ok.

Help please, got no ideas already.

What resolution/size are these textures, and what’s the error on the 15th?

My textures are 512x512 and Error is like:

  1. Event {isTrusted: true, type: ‘error’, target: img, currentTarget: img, eventPhase: 2, …}

  2. isTrusted: true

  3. bubbles: false

  4. cancelBubble: false

  5. cancelable: false

  6. composed: false

  7. currentTarget: null

  8. defaultPrevented: false

  9. eventPhase: 0

  10. returnValue: true

  11. srcElement: null

  12. target: null

  13. timeStamp: 57279.200000047684

  14. type: “error”

  15. [[Prototype]]: Event

I suppose that this is some sort of corrupted texture in my texture library. I pushed another one in my library and everything is ok. Thank You for your attention.

1 Like