Three.js 将网格拼接在一起形成可见接缝

我正试着把一个球体和单独的切片拼接在一起。基本上，我有多个SphereGeoEmtry切片，形成一个球体，用于投影全景。切片用于延迟加载非常大的全景

在这些切片上使用默认纹理包裹模式（THREE.ClampToEdgeWrapping），从远处看全景看起来很好，但如果放大，则很明显网格的边缘正在拉伸，从而导致可见接缝。这很有意义，因为它正在拉伸边缘的最后一个像素

我还尝试将换行模式更改为“三”。但是，重复换行会使接缝完全可见：

---

所以我的问题是，拼接网格的最佳方法是什么？或者这是不可避免的吗？

在我的头顶上，你们必须使每个纹理在每个方向上都包含一个边框行和边框列，这是相邻纹理的重复，然后适当地调整UV坐标

例如，如果大图像宽8像素，高6像素

ABCDEFGH
IJKLMNOP
QRSTUVWX
YZ123456
789abcde
fghijklm

你想把它分成4个部分（每个4，3） 那你就需要这4个零件了

ABCDE DEFGH
IJKLM LMNOP
QRSTU TUVWX
YZ123 23456

QRSTU TUVWX
YZ123 23456
789ab abcde
fghij ijklm

同时，为了便于重复边缘，因此

AABCDE DEFGHH
AABCDE DEFGHH
IIJKLM LMNOPP
QQRSTU TUVWXX
YYZ123 234566

QQRSTU TUVWXX
YYZ123 234566
7789ab abcdee
ffghij ijklmm
ffghij ijklmm

重复边缘是因为我假设你要分割成超过2x2，所以从技术上来说，如果你要将50像素宽的东西分割成5个部分，你可以做11，12，12，11宽的部分。只有11个像素而不是12个像素的边缘需要进行不同的UV调整。但是，通过重复这些边，我们可以使它们都是12，12，12，12，12，所以一切都是一致的

测试时，左侧为正常分割，显示接缝。右边是固定的，没有接缝

正文{
保证金：0；
}
#c{
宽度：100vw；
高度：100vh；
显示：块；
}

将*作为三个源导入'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
函数main（）{
const canvas=document.querySelector（“#c”）；
const renderer=new THREE.WebGLRenderer（{canvas}）；
常数fov=75；
const aspect=2；//画布默认值
常数近=0.1；
常数far=5；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=1；
const scene=new THREE.scene（）；
//使用画布制作纹理以进行测试
const bigImage=document.createElement（'canvas'）；
{
const ctx=bigImage.getContext（'2d'）；
常数宽度=32；
常数高度=16；
ctx.canvas.width=宽度；
ctx.canvas.height=高度；
const gradient=ctx.createLinearGradient（0，0，宽度，高度）；
渐变。添加颜色停止（0，'红色'）；
渐变。添加颜色停止（0.5，'黄色'）；
渐变。添加颜色停止（1，'蓝色'）；
ctx.fillStyle=渐变；
ctx.fillRect（0，0，宽度，高度）；
}
const forceTextureInitialization=函数（）{
const material=新的三个.MeshBasicMaterial（）；
const geometry=新的三个.PlaneBufferGeometry（）；
const scene=new THREE.scene（）；
添加（新的三个网格（几何体、材质））；
const-camera=新的三个摄像头（）；
返回函数forceTextureInitialization（纹理）{
material.map=纹理；
渲染器。渲染（场景、摄影机）；
};
}();  
//坏的
{
const ctx=document.createElement（'canvas'）.getContext（'2d'）；
//将纹理分割为4个平面上的4个部分
横截常数=2；
常数下降=2；
const pixelsAcross=bigImage.width/cross；
const pixelsDown=bigImage.height/down；
ctx.canvas.width=pixelsAcross；
ctx.canvas.height=pixelsDown；
for（设y=0；ybigIma