Using multiple textures on different faces of one geometry

Question

I'm quite new to Three.js so I'm not sure if it's possible to do this:

I want to display multiple images over a plane geometry (some of them will appear multiple times). Imagine the next simplified case:

+---+---+---+  
| 1 | 2 | 3 |  
+---+---+---+  
| 4 | 1 | 6 |  
+---+---+---+  
| 1 | 1 | 9 |  
+---+---+---+

I'm creating the plane with it's divisions and applying a MeshBasicMaterial (contained inside a MeshFaceMaterial) to its faces. Each pair of faces has assigned one of the available images, ie:

image1 is applied to faces {0, 1}, {8, 9}, {12, 13}, {14, 15}
image2 is applied to faces {2, 3}
...

The images are "correctly" appearing on the right position but their size is not correct. Each tile square is 256x256 pixels size and each image to be displayed is also 256x256. My problem is that the texture size is being streched to the edge of the geometry.

I've tried to play with the texture wrapS/wrapT properties with no luck as it's always stretching out to 768x768 (in this example).

My current code:

// TEXTURE LOADING LOOP
// canvas contains a 256x256 image
var texture = new THREE.Texture(canvas);
//My last test was trying to clamp to the edge of the face -> failed
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
texture.needsUpdate = true;
this.materials.push(
    new THREE.MeshBasicMaterial({
        map: texture
    })
);

// LATER, we generate 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 it possible to assign the same material texture to different faces and keep their current size, so on each tile the texture is displayed with its current size?

To make more clear the issue, on this result image we can see that the same texture was applied to the center, left-bottom and right-bottom tiles and each one should be displaying a full version of the 256x256 pixels image. http://angelraposo.appspot.com/images/result.jpg

Perfect! that fixed it. I used the UV option as I haven't used before and it was a great way to learn how to use them ;) — Angel

WestLangley WestLangley · Accepted Answer · 2014-04-09T16:08:04

The dimensions of your plane geometry are irrelevant -- only the aspect ratio matters, so the images are not stretched.

You have several options:

You can change the UVs of each triangle of your plane geometry to be (0,0), (0,1), (1,0), or (1,1) as appropriate.
You can set the texture.offset and texture.repeat properties as appropriate for each texture. For example, texture.offset.set( 0, 1/3 ) and texture.repeat.set( 3, 3 ).
A final, easy, option is to just have 9 plane geometries, each with 2 triangular faces.

three.js r.66

Using multiple textures on different faces of one geometry

1 Answers