问题
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 ?
回答1:
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
回答2:
Use texture.mapping instead of texture.offset
来源：https://stackoverflow.com/questions/21532197/shift-texture-on-sphere-three-js