Stretch image texture to fit mesh face in Three.js

Question

I'm trying to make the following in three.js:

I made the model in sketchup with some simple coloured textures and used the collader importer, the result looks like this:

Now I want to dynamically load some photographs onto each of the different planes, however what I end up with is this:

So as you can see, each image is loaded but they are very small and repeated across the rest of the surface.

This is how I load the textures: (preloadTexture() is just a simple preloader)

for(i in cubeSidesArray)
{
    preloadTexture(modelThumbsArray[i]);

    var newTexture = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture(modelThumbsArray[i]) } );
    cubeSidesArray[i].material = newTexture;
}

How do I get the textures to fill the surface?

Thanks!

Edit - I played with the model in sketchup and managed to get it a little better, but not much!

Edit 2 - Still no luck, I'm starting to think building it in code from scratch would be simpler

Answer 1

Option 1: I would advise you to do or next.

1 -.Import the model blender
2 -.Export blender to threejs
3 -.Use this method of charging.

AgregarModeloBlender function (geometry, materials) {
      console.log(materials);
      material = new THREE.MeshFaceMaterial( materials );   
      modelo3d_ = new THREE.Mesh( geometry,material );  
      escenario.add(modelo3d_);
      modelo3d_.add(camera);    
      modelo3d_.scale.set(5,5,5);   
      modelo3d_.position.set(-900,25,850);
      modelo3d_.rotation.y=Math.PI;
}

4 -. Subsequently trabajr with textures independently. Example: http://all.develoteca.com/builder/

Option 2: I would advise you to do or this: 1 -. Create the geometric shape (vertices) to modify each of the faces of the texture. Example: http://develoteca.com/Panel/

Greetings.