javascriptthree.jstexture-mapping

Three.js Texture Mapping with No Scaling

I'm mapping a texture of dimensions 300 x 250 to a Mesh that is 600 x 20. The texture are being scaled down, distorting the image. Anyway to prevent this? Ideally, I want to map the texture at 300 X 20, "cutting" away at 20 and above

My code is as follows.

var floorTx = THREE.ImageUtils.loadTexture( './walltile/floorTx.jpg' );
floorTx.wrapS = floorTx.wrapT = THREE.RepeatWrapping;
floorTx.repeat.set(2, 2);
var floorMat = new THREE.MeshPhongMaterial( { map: floorTx, specular: 0x050505, shininess: 100});
var floor = new THREE.Mesh(cube, floorMat );
floor.castShadow = true;
floor.receiveShadow = true;
floor.name = "floor";
floor.dynamic = true;
scene.add( floor );
Solution

  • The key is to set the texture's repeat property according to the size of the mesh.

    floorTx.repeat.set(meshWidth / textureWidth, meshHeight / textureHeight);