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

通过它的外观，您将您设置的个别纹理的纹理模式设置为重复。

这似乎是错误的，个别纹理不重复，它们只显示一次。设置要重复的纹理会导致纹理的右侧在左侧“混合”（反之亦然），从而导致可见的接缝（如截图中的接缝）。