title: Stretch image texture to fit mesh face in Three.js
body: <p>I'm trying to make the following in three.js:</p>
  
  <p><img src="https://i.stack.imgur.com/BPZMA.jpg" alt="Aim"></p>
  
  <p>I made the model in sketchup with some simple coloured textures and used the collader importer, the result looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/c3bg7.png" alt="Start"></p>
  
  <p>Now I want to dynamically load some photographs onto each of the different planes, however what I end up with is this:</p>
  
  <p><img src="https://i.stack.imgur.com/Bo6Wt.png" alt="Error"></p>
  
  <p>So as you can see, each image is loaded but they are very small and repeated across the rest of the surface.</p>
  
  <p>This is how I load the textures:  (<code>preloadTexture()</code> is just a simple preloader)</p>
  
  <pre><code>for(i in cubeSidesArray)
  {
      preloadTexture(modelThumbsArray[i]);
  
      var newTexture = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture(modelThumbsArray[i]) } );
      cubeSidesArray[i].material = newTexture;
  }
  </code></pre>
  
  <p>How do I get the textures to fill the surface?</p>
  
  <p>Thanks!</p>
  
  <p><strong>Edit - I played with the model in sketchup and managed to get it a little better, but not much!</strong></p>
  
  <p><strong>Edit 2 - Still no luck, I'm starting to think building it in code from scratch would be simpler</strong></p>