CODEWITHSUNDEEP
javascriptthree.jswebgl
user3241019
user3241019

Reputation: 811

Shift texture on sphere Three.js

I have a sphere with a map on it using Three.js, the image dimensions are 1024*2048.

Here is the issue : I have CircleGeometries on my sphere indicating some places of interest, but when I just load the image on sphere it isn't well placed, and my points of interest aren't above the right country.

the idea is to rotate a bit my map so it fits the points of interest, but I can't get it to work.

I tried to use texture.offset.x = 0.5;

Math.PI / (2 * Math.PI) = 0.5 as I want to rotate half a globe

but I ended up with only half a globe covered with the image.

So I used texture.wrapS = THREE.RepeatWrapping; but now I got like 2 images on each other on the globe and the result is quite ugly.

I looked the post about rotate sphere texture to find help but it doesn't solve my problem. Btw is it mandatory to have a power of two image ?

Any idea ?

Upvotes: 0

Views: 1955

Answers (2)

user3241019
user3241019

Reputation: 811

Finally I used the phiStart attribute of my sphere :

phiStart — specify horizontal starting angle. Default is 0.

And set it to

3/2 * Math.PI (instead of 0) - (Math.PI/200) to match exactly the country bounding box, as :

the images were around 100km far from their right position, then simple math can solve this :

2*PI = 40.000 km and I want 100km so 2*PI*100 / 40.000 = PI/200

Upvotes: 1

Troopers
Troopers

Reputation: 5452

Use texture.mapping instead of texture.offset

Upvotes: 0

Related Questions