Uniform texture on merged mesh

Question

How can I make merged mesh from geometry to be textured in one peace instead of 3? In my sample code, the texture is done on each separated geometry (see image, point 1 and 2). Two Cubes and one Cylinder.

Code used:

scene = new THREE.Scene();

var texture = new THREE.TextureLoader().load( '1-3-2-5-Bois.jpg' );
var mesh = [], no = 0;
var meshes = [];
var geometry = new THREE.CubeGeometry( 2, 10, 1 );
mesh[no] = new THREE.Mesh( geometry );
meshes.push(mesh[no]);
no++;

geometry = new THREE.CylinderGeometry( 0.5, 0.5, 10, 32 );
mesh[no] = new THREE.Mesh( geometry );
mesh[no].position.set( 1, 0, 0 );
mesh[no].rotation.x = 0;
mesh[no].rotation.y = Math.PI/2;
mesh[no].rotation.z = 0;
meshes.push(mesh[no]);
no++;

geometry = new THREE.CubeGeometry( 5, 10, 1 );
mesh[no] = new THREE.Mesh( geometry );
mesh[no].position.set( -3.5, 0, 0 );
meshes.push(mesh[no]);
no++;
geometry = mergeMeshes(meshes);

var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
...
function mergeMeshes (meshes) {
    var combined = new THREE.Geometry();
    for (var i = 0; i < meshes.length; i++) {
        meshes[i].updateMatrix();
        combined.merge(meshes[i].geometry, meshes[i].matrix);
    }
    return combined;
}

Answer 1

Just for the community. Here the function I used to fix it. Call it after the mergeMeshes().

function assignUVs(geometry) {
 geometry.computeBoundingBox();

 var max = geometry.boundingBox.max, min = geometry.boundingBox.min;
 var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
 var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
 var faces = geometry.faces;
 var vertices = geometry.vertices;

 geometry.faceVertexUvs[0] = [];
 for (var i = 0, il = faces.length; i < il; i++) {
  var v1 = vertices[faces[i].a], v2 = vertices[faces[i].b], v3 = vertices[faces[i].c];

  geometry.faceVertexUvs[0].push([
   new THREE.Vector2((v1.x + offset.x) / range.x, (v1.y + offset.y) / range.y),
   new THREE.Vector2((v2.x + offset.x) / range.x, (v2.y + offset.y) / range.y),
   new THREE.Vector2((v3.x + offset.x) / range.x, (v3.y + offset.y) / range.y)
  ]);
 }
 geometry.uvsNeedUpdate = true;
}

Answer 2

You need to make sure the UVs match between the merged meshes. That seam is caused by the fact the different objects have a different UV layouts. You'd need to edit the faceVertexUvs or faceUvs on the created geometry so that UVs are contiguous, then set uvsNeedUpdate