Проблема 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

По внешнему виду, вы устанавливаете режим текстур неимоверных текстур в своем наборе на repeat.

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