如何解决Three.js中SphereGeometry背景的接缝线问题？

一、纹理接缝问题的解决思路 #

1. 修正UV映射 #

SphereGeometry默认UV在φ=0/2π的接缝位置存在0和1的突变，导致纹理边缘采样不连续。可以手动调整UV数组，让接缝处的UV值轻微重叠：

const sphereGeo = new THREE.SphereGeometry(50, 64, 32);
const uvAttribute = sphereGeo.getAttribute('uv');
for (let i = 0; i < uvAttribute.count; i++) {
  const u = uvAttribute.getX(i);
  if (Math.abs(u - 1) < 0.001) {
    uvAttribute.setX(i, u - 0.0005);
  }
}
uvAttribute.needsUpdate = true;

2. 调整纹理包裹与重复模式 #

设置纹理横向重复并轻微放大，用重叠部分掩盖接缝：

const texture = new THREE.TextureLoader().load('your-texture.jpg');
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = 1.001;
texture.needsUpdate = true;

3. 使用全景图专用映射 #

如果用全景图做背景，直接使用EquirectangularReflectionMapping，这种映射原生适配全景纹理，避免接缝：

const texture = new THREE.TextureLoader().load('panorama.jpg');
texture.mapping = THREE.EquirectangularReflectionMapping;
const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });

4. 确保纹理本身无缝 #

使用图像编辑工具（如Photoshop）对纹理边缘做无缝过渡处理，或选用专业的无缝全景素材，从根源避免接缝问题。

二、无限背景完整实现示例 #

import * as THREE from 'three';

// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载并处理全景纹理
const textureLoader = new THREE.TextureLoader();
const panoramaTexture = textureLoader.load('panorama.jpg', () => {
  panoramaTexture.mapping = THREE.EquirectangularReflectionMapping;
  panoramaTexture.wrapS = THREE.RepeatWrapping;
  panoramaTexture.repeat.x = 1.001;
  panoramaTexture.needsUpdate = true;
});

// 创建球体背景（反向渲染，相机处于球内）
const sphereGeometry = new THREE.SphereGeometry(100, 128, 64);
// 可选：手动优化UV
const uvAttribute = sphereGeometry.getAttribute('uv');
for (let i = 0; i < uvAttribute.count; i++) {
  const u = uvAttribute.getX(i);
  if (u > 0.999) {
    uvAttribute.setX(i, u - 0.0005);
  }
}
uvAttribute.needsUpdate = true;

const sphereMaterial = new THREE.MeshBasicMaterial({
  map: panoramaTexture,
  side: THREE.BackSide,
  depthWrite: false // 避免遮挡场景内其他物体
});
const skySphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(skySphere);

// 相机固定在球心
camera.position.set(0, 0, 0);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  skySphere.rotation.y += 0.001; // 背景缓慢旋转增强沉浸感
  renderer.render(scene, camera);
}
animate();

// 窗口 resize 适配
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

三、额外注意事项 #

• 提高SphereGeometry的分段数（第二、第三个参数），建议设置为64以上，避免因纹理拉伸不均加重接缝问题。
• 使用高分辨率纹理，低分辨率素材放大后边缘瑕疵会更明显。

内容的提问来源于stack exchange，提问作者user20478727