CODEWITHSUNDEEP
javascriptcanvasthree.js
Ali Wahab
Ali Wahab

Reputation: 592

Three JS SphereGeometry texture is not rendering properly

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

Upvotes: 1

Views: 1462

Answers (1)

Jay Li
Jay Li

Reputation: 747

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

Upvotes: 2

Related Questions