javascript - 三个 JS SphereGeometry 纹理无法正确渲染

Question

我正在使用三个JS来实现像这样的球体上的等距柱状图像。使用maptoglobe.com我想要实现的目标

我得到了什么
我正在使用的代码

 this.scene = new THREE.Scene();
    this.geometry = new THREE.SphereGeometry( 0.4, 100, 100 );
    var texture = new THREE.TextureLoader().load('assets/Webp.png');

    this.material = new THREE.MeshBasicMaterial({map : texture, overdraw: 0.1});

    this.mesh = new THREE.Mesh( this.geometry, this.material );

    this.scene.add( this.mesh );

区别在于maptoglobe.com 图像中出现红线。但我写的代码中没有。

如有任何帮助，我们将不胜感激。

编辑 1

我的球体 StackBlitz

球体位于 MapToGlobe

Answer 1

要解决投影问题，您可以使用 OrthographicCamera 而不是 PerspectiveCamera

this.camera = new THREE.OrthographicCamera(
      window.innerWidth / -2,
      window.innerWidth / 2,
      window.innerHeight / 2,
      window.innerHeight / -2,
      1,
      1000
    );

结果: