No encuentro una manera razonable de como cargar imágenes en javascript para utilizarlas de textura utilizando la librería three.js. Debido a que fácilmente son más de 6k imágenes, principalmente he probado cargarlas todas de golpe una a una (cosa que sabía que petaría), ponerle un request onload (pero el tiempo de espera es demasiado largo para una página web) y utilizar un LOD para cargar cuando estén cerca (pero provoca tirones debido a la gran cercanía de los paneles que utilizan las texturas).
Dejo un fragmento de código de donde debería de aplicar las texturas (y seguramente donde debería de cargar las imagenes) directamente a pelo sin las opciones que he probado. Maprows sería el tamaño físico del edificio y rows la cantidad de filas llenas de paneles (cada uno con una imagen única y difente)
for(let i = 0; i < Edificios.length; i ++) {
EdiGeo[i] = new THREE.BoxGeometry( Edificios[i]['maprows'] * escala, Edificios[i]['height'] * escala , Edificios[i]['mapcolumns'] * escala, Edificios[i]['maprows'], Edificios[i]['height'], Edificios[i]['mapcolumns']);
switch(Edificios[i]['type']) {
case 'edificio':
Edi[i] = new THREE.Mesh(EdiGeo[i],EdiMat);
if(Edificios[i]['image'] != null) {
let paneles = new THREE.Group();
for(let j = 0; j > -Edificios[i]['rows']; j--) {
Pan[j] = [];
for(let k = 0; k < Edificios[i]['columns']; k++) {
textura = new THREE.TextureLoader().load( url + Edificios[i]['image'][j][k] );
PanMat = new THREE.MeshBasicMaterial( { map: textura} );
Pan[j][k] = new THREE.Mesh(PanGeo, PanMat);
Pan[j][k].lookAt(Edificios[i]['normal']['X'],Edificios[i]['normal']['Y'],Edificios[i]['normal']['Z']);
Pan[j][k].position.set(Edificios[i]['maprows'] / Edificios[i]['columns'] * k * Edificios[i]['normal']['Z'] * escala, Edificios[i]['height'] / Edificios[i]['rows'] * j * escala, Edificios[i]['mapcolumns'] / Edificios[i]['columns'] * k * Edificios[i]['normal']['X'] * escala);
paneles.add(Pan[j][k]);
}
}
paneles.position.set((Edificios[i]['maprows'] / 2 - tamPanel / 2 ) * -Edificios[i]['normal']['Z'] * escala + (0.1 + Edificios[i]['maprows'] / 2 * escala) * Edificios[i]['normal']['X'] , (Edificios[i]['height'] / 2 - tamPanel) * escala, (Edificios[i]['mapcolumns'] / 2 - tamPanel / 2) * -Edificios[i]['normal']['X'] * escala + (0.1 + Edificios[i]['mapcolumns'] / 2 * escala) * Edificios[i]['normal']['Z']);
Edi[i].add(paneles);
}
break;
///etc