1

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

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.