Three.js: Make image texture fit object without distorting or repeating

Question

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 t

Answer 1

I got it to work just as @WestLangley suggested. Here's the solution in CoffeeScript:

tex1.wrapS = THREE.ClampToEdgeWrapping
tex1.wrapT = THREE.RepeatWrapping
repeatX = (clothWidth * textureSetting.h / (clothHeight * textureSetting.w))
repeatY = 1
tex1.repeat.set repeatX, repeatY
tex1.offset.x = (repeatX - 1) / 2 * -1

And for anyone who prefers vanilla JavaScript, here is the JS Version:

var repeatX, repeatY;
tex1.wrapS = THREE.ClampToEdgeWrapping;
tex1.wrapT = THREE.RepeatWrapping;
repeatX = clothWidth * textureSetting.h / (clothHeight * textureSetting.w);
repeatY = 1;
tex1.repeat.set(repeatX, repeatY);
tex1.offset.x = (repeatX - 1) / 2 * -1;