1

I am using three JS to achieve equirectangular image on sphere like this. Using maptoglobe.com What I want to achieve

What I am getting
The code i am using

 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 );

The difference is red lines appearing in maptoglobe.com image. But not in the code which I have written.

Any help would be appreciated.

Edit 1

My Sphere StackBlitz

Sphere on MapToGlobe

Ali Wahab
  • 482
  • 6
  • 13
  • The red line doesn't seem to be a red line, but more a round or spherical red shape behind the picture (look at the shading on the red "line"). If you want a red line, you can try to draw a bigger red circle behind the picture. Here's a question which may help: https://stackoverflow.com/questions/13756112/draw-a-circle-not-shaded-with-three-js and some docs about shapes: https://threejs.org/docs/#api/en/geometries/CircleGeometry – Barudar Oct 08 '19 at 02:38
  • Hi, Yeah the red line is the background of Equirectangular image. I am using SphereGeometry. I think Circle Geometry won't help because I need a rotating sphere. – Ali Wahab Oct 09 '19 at 06:29
  • Feel free to ask any question – Ali Wahab Dec 27 '19 at 07:30
  • how about use `outline postprocessing`? https://threejs.org/examples/#webgl_postprocessing_outline – Jay Li Dec 30 '19 at 09:40
  • I don't think so it will gonna help. Can you provide some code example? – Ali Wahab Dec 30 '19 at 13:01
  • how about using glow? http://kadekeith.me/2017/09/12/three-glow.html – mudin Dec 31 '19 at 12:30
  • I checked maptoglobe source, it is using glow too – mudin Dec 31 '19 at 12:31
  • I think glow is for lights around the object. The issue is Image projection. Image in maptoglobe.com fix perfect, While in my sphere it not correct. – Ali Wahab Dec 31 '19 at 13:17
  • Just checking: Are you looking to add the red border or hoping to fix the projection (it does look a bit exaggerated in provided three.js version) or both? If addressing the red issue, can you post a couple more images from maptoglobe.com from different perspectives to give a better idea of what's there? – Christopher Stevens Dec 31 '19 at 22:18
  • Hey @ChristopherStevens I am hoping to fix image projection. Please check the both links in the question you can get the idea what I want – Ali Wahab Jan 01 '20 at 06:29

1 Answers1

2

to fix the projection issue, you can use OrthographicCamera instead of PerspectiveCamera

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

result:

enter image description here

Jay Li
  • 737
  • 1
  • 7
  • 17
  • Maaaaaan you are a life saver. Just tell me how did you find the fix???? – Ali Wahab Jan 02 '20 at 06:04
  • glad to be of help :), well, I had run into issues with cameras before, so I kinda know OrthographicCamera could let you "see more", I don't fully understand how it works, but i figured it's the effect you are looking for. – Jay Li Jan 02 '20 at 06:47