使用MeshFaceMaterial在平铺纹理边缘发布Three.js

我正在尝试使用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=高度段/平铺宽度；
var faceCountX=2*widthSegments；
var faceCountY=高度段；
对于（var tileIndexY=0；tileIndexY

---

我尝试过所有已知的解决方案，甚至尝试过编写自定义着色器并使用ShaderMaterial。但是运气不好，有人能帮我解决这个问题吗？

从外观上看，您将集合中的invidual纹理的纹理模式设置为“重复”

---

这似乎是错误的，单个纹理不会重复，它们只显示一次。将纹理设置为“重复”会导致纹理的右侧在左侧“混合”（反之亦然），从而产生与屏幕截图上相同的可见接缝。

我尝试了不重复，但问题是平面几何体的uv贴图范围为0到1，左边的纹理从第一个图像中取一半，右边的纹理从第二个图像中取一半。为了管理uv贴图，我使用了repeat。

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