Threejs - UV Texture

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<div>
No matter the size, the texture does not scale or stretch.
</div>

JavaScript

var objects = []; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera);
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(125,125,125));
camera.lookAt(new THREE.Vector3(0,0,0));

var axisHelper = new THREE.AxisHelper(12);
scene.add(axisHelper);

// preload texture
var crateTexture = loadTextureUsingImageDomHack(false, fti(2));
var deckTexture = loadTextureUsingImageDomHack(true, fti(3));

var vec2s = [];
// units in feet
vec2s = [
  [0,0],
  [0,3],
  [5,5],
  [9,3],
  [5,0]
  ];
var customMesh = createShape(vec2s);
customMesh.material.map = deckTexture;

// units in feet
vec2s = [
  [0,0],
  [0,2],
  [-1,2],
  [-1,3],
  [3,3],
  [3,0]
  ];
var customMesh2 = createShape(vec2s);
customMesh2.position.x -= 4*12;
customMesh2.material.map = deckTexture;

// units in feet
vec2s = [
  [0,0],
  [0,1],
  [1,1],
  [1,0]
  ];
var customMesh3 = createShape(vec2s);
customMesh3.position.set(-2*12, 4*12, 0);
customMesh3.material.map = deckTexture;

var customMesh4 = createShape(vec2s);
customMesh4.position.set(-4*12, 4*12, 0);
customMesh4.material.map = crateTexture;

// units in feet
vec2s = [
  [0,0],
  [0,2],
  [2,2],
  [2,0]
  ];
var customMesh5 = createShape(vec2s);
customMesh5.position.set(-2*12, -4*12, 0);
customMesh5.material.map = crateTexture;

render();

function createShape(point2ds){
	var vector2s = [];
  point2ds.forEach(function(point){
  	vector2s.push(new THREE.Vector2(point[0]*12, point[1]*12));
  });
  var shape = new THREE.Shape(vector2s);
  var shapeGeo = new THREE.ShapeGeometry(shape);
  var shapeMesh = new THREE.Mesh(shapeGeo, new THREE.MeshBasicMaterial());
  scene.add(shapeMesh);
  return shapeMesh;
}

function...