在球体 Three.js 上移动纹理 [英] Shift texture on sphere Three.js

问题描述

我有一个球体，上面有地图，使用 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.

phiStart — specify horizontal starting angle. Default is 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 上移动纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！