Three.js中如何保证球体周围的背景纹理平滑连接？

Question

下面是设置纹理并将其映射到大球体上的代码。我尝试了各种包裹，但背景仍然不平滑，因为纹理的两个部分相遇的地方有明显的连接。我该如何解决？有没有办法重叠边缘？

var milkyWayTexture = loader.load('https://cdn.pixabay.com/photo/2016/11/21/12/30/milky-way-1845068_1280.jpg');

 milkyWayTexture.minFilter = THREE.LinearFilter; 
        milkyWayTexture.magFilter = THREE.LinearFilter; 

        milkyWayTexture.wrapS = THREE.RepeatWrapping;
        milkyWayTexture.wrapT = THREE.RepeatWrapping;

        // Create a large sphere mesh for the starry background
        var backgroundGeometry = new THREE.SphereGeometry(900, 100, 100);
        backgroundGeometry.scale(-1, 1, 1); // Flip the geometry to invert the texture mapping

        var backgroundMaterial = new THREE.MeshBasicMaterial({
            side: THREE.DoubleSide, // Make the sphere visible from inside as well as outside
            map: milkyWayTexture // Add Milky Way texture
        });

        var backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
       
        scene.add(backgroundMesh);

Answer 1

您需要了解UV贴图的概念。它定义了纹理如何投影到 3D 对象上。

通常，在球体上，如果将概念简化到其核心，它由一个沿 X 和 Y 旋转的平面组成，以包裹在球体上。

通过图示你可能已经猜到答案了：

• 地球被认为是一个球体和一个平面，并且，如果您查看此网站https://trinketmage.github.io/，它准确地说明了您想要实现的目标。它在球体上显示这个地球“平面”（等距矩形）纹理。
• 您需要寻找

  Equirectangular

  银河系纹理的映射（示例）。
• 寻找

  360 panorama

  银河系纹理也可以实现（示例）。

或者，要设置环境，我认为使用

scene.background

（source）和 HDR 文件中的

EquirectangularReflectionMapping

纹理（可以在此处找到）是更好的做法。