Проблема Three.js по краям мозаичной текстуры при использовании MeshFaceMaterial

Question

Я пытаюсь наложить текстуру из нескольких изображений на плоскую геометрию, используя MeshFaceMaterial. Все отлично работает, за исключением размытых краев, образующихся между плитками.,

        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);

Я перепробовал все известные решения, я даже пытался написать собственный шейдер и использовать ShaderMaterial. Но не повезло, кто-нибудь может помочь мне решить проблему?

Answer 1

Судя по всему, вы устанавливаете режим текстуры отдельных текстур в вашем наборе для повторения.

Это кажется неправильным, отдельные текстуры не повторяются, они отображаются только один раз. Повторение текстуры приводит к тому, что правая сторона текстуры "сливается" слева (и наоборот), вызывая видимые швы, как на скриншоте.