0

I am trying to tile the texture from multiple images onto a plane geometry using MeshFaceMaterial. Every thing works fine, except for a blurry edge forming in between tiles. Screenshot of image.

        var textureArray = [];
        var tileColumns = 2;
        var tileRows = 1;
        textureArray[0] = THREE.ImageUtils.loadTexture('./test3.jpg');
        textureArray[1] = THREE.ImageUtils.loadTexture('./test4.jpg');

        var faceCountPerTileX = 2 * widthSegments/tileColumns;
        var faceCountPerTileY = heightSegments/tileRows;
        var faceCountX = 2 * widthSegments;
        var faceCountY = heightSegments;         

        for(var tileIndexY = 0; tileIndexY < tileRows; tileIndexY++){
            for(var tileIndexX = 0; tileIndexX < tileColumns; tileIndexX++){

                var index = tileIndexY * tileColumns + tileIndexX;
            textureArray[index].wrapS = THREE.RepeatWrapping;
            textureArray[index].wrapT = THREE.RepeatWrapping;  
            textureArray[index].repeat.set(tileColumns,tileRows);                    

                materialContainer[tileIndexY * tileColumns + tileIndexX] = new THREE.MeshBasicMaterial({
                    map: textureArray[tileIndexY * tileColumns + tileIndexX],
                    overdraw: true,
                    ambient: 0xffffff
                }); 

                for(var faceIndexY = tileIndexY * faceCountPerTileY; faceIndexY < (tileIndexY+1) * faceCountPerTileY; faceIndexY++){                
                    for(var faceIndexX = tileIndexX * faceCountPerTileX; faceIndexX < (tileIndexX+1) * faceCountPerTileX; faceIndexX++){
                        g.faces[faceIndexY * faceCountX + faceIndexX].materialIndex = tileIndexY * tileColumns + tileIndexX;
                    }  
                }       
            }
        }        

    var mat = new THREE.MeshFaceMaterial(materialContainer);

    var obj = new THREE.Mesh(g, mat);

I have tried all known solutions, i have even tried writing a custom shader and using ShaderMaterial. But no luck, can some help me out to fix the issue?

gman
  • 100,619
  • 31
  • 269
  • 393
ryagz
  • 1
  • 1

1 Answers1

0

By the looks of it, you set the texture mode of the invidual textures in your set to repeat.

This seems wrong, the individual textures do not repeat, they are displayed only once. Setting a texture to repeat causes the right side of the texture to "blend through" on the left (and vice versa), causing visible seams like the one on your screenshot.

Paul-Jan
  • 16,746
  • 1
  • 63
  • 95
  • I tried without repeating, But the problem is as plane geometry is uv mapped from 0 to 1, the texture on the left is taking half from first image and on the the right a half from second image. In order to manage for the uv mapping i used repeat. – ryagz Oct 12 '15 at 11:18