在球体Three.js上移动纹理

时间:2014-02-03 16:12:44

标签: javascript three.js webgl

我有一个带有地图的球体,使用 Three.js ,图像尺寸为1024 * 2048.

问题在于:我的球体上有CircleGeometries指示了一些感兴趣的地方,但是当我只是将图像加载到球体上时它没有很好地放置,并且我的兴趣点不在正确的国家之上。 / p>

我的想法是旋转一点我的地图,使其适合感兴趣的点,但我无法让它发挥作用。

我尝试使用texture.offset.x = 0.5;

Math.PI /(2 * Math.PI)= 0.5,因为我想旋转半个地球

但最终只有半个球体覆盖了图像。

所以我使用了texture.wrapS = THREE.RepeatWrapping; 但现在我在地球上互相拍了两张图像,结果非常难看。

我查看了关于rotate sphere texture的帖子以寻求帮助,但它并没有解决我的问题。 顺便说一句,它必须具有两个图像的强大功能吗?

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

最后我使用了我的球体的phiStart属性:

  

phiStart - 指定水平起始角度。默认值为0.

并将其设置为

3/2 * Math.PI (而不是0) - (Math.PI / 200)以准确匹配国家/地区边界框,如下所示:

图像离正确位置约100公里,然后简单的数学可以解决这个问题:

2 * PI = 40.000 km我想要100km所以2 * PI * 100 / 40.000 = PI / 200

答案 1 :(得分:0)

使用texture.mapping而不是texture.offset