CODEWITHSUNDEEP
three.jstexture-mappingtiling
ryagz
ryagz

Reputation: 1

Three.js issue at edges of tiled texture using MeshFaceMaterial

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?

Upvotes: 0

Views: 558

Answers (1)

Paul-Jan
Paul-Jan

Reputation: 17278

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.

Upvotes: 0

Related Questions