title: Three.js: Make image texture fit object without distorting or repeating
body: <p>I'm loading a .png file and displaying it as a texture on a rectangular surface. The aspect ratio of the .png and the aspect ratio of the surface are not the same. I need the texture to fit the object</p>
  
  <ul>
  <li>without repeating</li>
  <li>without distorting, i.e. maintaining its aspect ratio</li>
  <li>positioned at the center</li>
  <li>The height of the texture should be scaled up or down to the height of the object.</li>
  </ul>
  
  <p>(For those familiar to CSS, I'm trying to achieve the equivalent of <code>background-size: auto 100%; background-repeat: no-repeat; background-position: center;</code>.)</p>
  
  <p>So far I am doing</p>
  
  <pre><code>tex1.wrapS = THREE.ClampToEdgeWrapping
  tex1.wrapT = THREE.ClampToEdgeWrapping
  repeatX = (clothWidth * textureSetting.h / (clothHeight * textureSetting.w))
  repeatY = 1
  tex1.repeat.set repeatX, repeatY
  </code></pre>
  
  <p><code>clothHeight</code> and <code>clothWidth</code> are the dimensions of the object, <code>textureSetting.w</code> and <code>textureSetting.h</code> are the dimensions of the texture.</p>
  
  <p>The texture is distorted and offset to the right.</p>