问题描述
我有一个球体，上面有地图，使用 Three.js，图像尺寸为 1024*2048.
I have a sphere with a map on it using Three.js, the image dimensions are 1024*2048.
问题是:我的球体上有 CircleGeometries，指示一些感兴趣的地方，但是当我在球体上加载图像时，它的位置不太好，而且我的兴趣点不在正确的国家/地区上方.
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.
我尝试使用 texture.offset.x = 0.5;
Math.PI/(2 * Math.PI) = 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.
所以我使用了 texture.wrapS = THREE.RepeatWrapping;但现在我在地球上得到了 2 张图像，结果非常难看.
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.
我查看了关于旋转球体纹理的帖子以寻求帮助，但它没有t解决我的问题.顺便说一句，必须要有两个图像的幂吗?
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 ?
有什么想法吗?
推荐答案
最后我使用了我的球体的 phiStart 属性:
Finally I used the phiStart attribute of my sphere :
phiStart — 指定水平起始角度.默认为 0.
并将其设置为
3/2 * Math.PI(而不是 0)- (Math.PI/200) 精确匹配国家/地区边界框，如:
3/2 * Math.PI (instead of 0) - (Math.PI/200) to match exactly the country bounding box, as :
图像距离正确位置大约 100 公里，然后简单的数学可以解决这个问题:
the images were around 100km far from their right position, then simple math can solve this :
2*PI = 40.000 公里，我想要 100 公里，所以 2*PI*100/40.000 = PI/200
2*PI = 40.000 km and I want 100km so 2*PI*100 / 40.000 = PI/200
这篇关于在球体 Three.js 上移动纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！