Stretching Texture across Merged Geometries

Question

I am building a first person maze - each wall in the maze is a THREE.PlaneGeometry. As i understand, it is much better practice to have these walls all merged into single object. I have created a class "walls" which does this each time a new "wall" is added:

this.geometry.merge(wall.mesh.geometry, wall.mesh.matrix);

After all the walls are added, I create a material + apply a texture:

this.material = new THREE.MeshBasicMaterial( { map: this.texture, side: THREE.DoubleSide } ); this.mesh = new THREE.Mesh( this.geometry, this.material );

The problem I am having is that the walls are not all the same width and so the texture mapping goes all funky (Image Here) on the merged geo. Each plane receives the entire texture and stretches it to its dimensions. Bearing in mind that all the walls require the same texturing, what would be the best way to 'wrap' the texture around the walls? Or should I be constructing my walls differently in the first place?

I have also given both Three.MultiMaterial(materials) and THREE.MeshFaceMaterial(materials) a go (giving a unique material to each wall), but these both seriously kill performance.

Thanks in advance,

Happy Days,

J

Screenshot: Maze Image

you will have to set uv attributes of the geometries so that neighbouring planes touch with the same uv and each plane has step depending on its size... — Derte Trdelnik, May 25 '16 at 11:26

score 0 · Answer 1 · edited May 25 '16 at 13:13

Run a loop over each faceVertexUV of each wall's geo. Multiply each UV.x by the width of the wall (eliminate stretching / shrinking). Add an offset to the UV.x of the wall that corresponds to a summation of the width of walls thus far:

var len = wall.geometry.faceVertexUvs[0].length;
for (var i = 0; i < len; i++){
    for (var j = 0; j < 3; j++){
        wall.geometry.faceVertexUvs[0][i][j].x *= wall.w;
    wall.geometry.faceVertexUvs[0][i][j].x += this.w;
    }
}
this.w += wall.w;

Stretching Texture across Merged Geometries

1 Answers1