三 JS SphereGeometry 纹理渲染不正确答案

【问题标题】：Three JS SphereGeometry texture is not rendering properly三 JS SphereGeometry 纹理渲染不正确
【发布时间】：2020-01-02 10:58:47
【问题描述】：

我正在使用三个 JS 在这样的球体上实现 equirectangular 图像。使用 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上的球体

【问题讨论】：

红线似乎不是红线，而更像是图片后面的圆形或球形红色形状（看红色“线”上的阴影）。如果你想要一条红线，你可以尝试在图片后面画一个更大的红圈。这是一个可能有帮助的问题：stackoverflow.com/questions/13756112/… 和一些关于形状的文档：threejs.org/docs/#api/en/geometries/CircleGeometry
嗨，是的，红线是Equirectangular图像的背景。我正在使用 SphereGeometry。我认为圆形几何不会有帮助，因为我需要一个旋转球体。
有任何问题欢迎提问
用outline postprocessing怎么样？ threejs.org/examples/#webgl_postprocessing_outline
我认为这不会有帮助。你能提供一些代码示例吗？

标签： javascript canvas three.js

【解决方案1】：

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

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

结果：

【讨论】：

Maaaaaan 你是一个救生员。告诉我你是怎么找到修复的？？？？
很高兴能帮上忙 :)，好吧，我之前遇到过相机问题，所以我知道 OrthographicCamera 可以让你“看到更多”，我不完全理解它是如何工作的，但我认为这是您正在寻找的效果。