I'm new to working with Three.js and I have a question about displaying multiple images over a plane geometry. Here is the scenario:
Imagine a simplified case where we have a plane divided into tiles like this:
+---+---+---+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 1 | 6 |
+---+---+---+
| 1 | 1 | 9 |
+---+---+---+
I have set up the plane with divisions and applied different textures to each pair of faces on the plane using MeshBasicMaterial. The issue I am facing is that even though the textures are appearing in the correct positions, they are being stretched to fit the entire face of the geometry.
Each tile square is 256x256 pixels in size, and each image I want to display is also 256x256. However, the texture size is stretching to fill the entire face of the geometry.
I have tried adjusting the texture wrap properties without success, as the texture keeps stretching out beyond the intended size.
Here is my current code snippet:
// TEXTURE LOADING LOOP
// canvas contains a 256x256 image
var texture = new THREE.Texture(canvas);
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
texture.needsUpdate = true;
this.materials.push(
new THREE.MeshBasicMaterial({
map: texture
})
);
// GENERATING THE GEOMETRY TO DISPLAY THE IMAGES
var geometry = new THREE.PlaneGeometry( 256*3, 256*3, 3, 3 );
// assign a material to each face (each face is 2 triangles)
var l = geometry.faces.length;
for( var i = 0; i < l; i+=2 ) {
// assigned_material contains the index of the material texture to display
// on each "square"
geometry.faces[ i ].materialIndex = assigned_material[i];
geometry.faces[ i+1 ].materialIndex = assigned_material[i];
}
// mesh
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( this.materials ) );
this.scene.add( mesh );
Is there a way to assign the same material texture to different faces on the geometry and maintain their original sizes, so that each tile displays the texture at its actual size?
To further illustrate the issue, you can view this image showing how the same texture was applied to different tiles but should have displayed the full version of the 256x256 pixel image: