将球体旋转到特定点。不是相机

Question

我需要一些帮助。

我有搜索，无法找到解决方案，因为所有解决方案都是围绕球体旋转相机。

就我而言，相机还在。我有一个webgl地球仪，周围使用纬度经度。我只想点击一个点并旋转地球网格，使其居中于该点。

我有点Vector3，它是纬度和经度，但我无法想象如何做到这一点。

周围有人可以帮助我吗？或者知道这样的例子吗？

提前谢谢

Answer 1

要旋转球体以匹配摄像机中心的纬度/经度，您可以执行以下操作：

var verticalOffset = 0.1;
sphere.rotation.x = latitude * ( Math.PI / 180 ) - verticalOffset;
sphere.rotation.y = ( 270 - longitude ) * ( Math.PI / 180 );

那么你可以用补间：

来调用它

var tween = new TWEEN.Tween(sphere.rotation)
    .to({ x: latitude * ( Math.PI / 180 ) - verticalOffset, y: ( 270 - longitude ) * ( Math.PI / 180 ) }, 2000)
    .start();

我创建了一个jsfiddle来演示这个，在Lissabon设置了一个标记：

http://jsfiddle.net/L0rdzbej/208/

<小时/> 的更新

如果球体已经转了很多圈，Y旋转值会攀升。然后如上所述补间旋转会导致大量反向旋转，直到该点显示在摄像机中心。

为避免这种情况，可以通过四元数设置旋转。补间必须使用时间四元数进行slerp。 出于演示目的，我将球体初始Y旋转设置为PI * 12.1，然后应用四元数。

http://jsfiddle.net/L0rdzbej/217/

var phi = latitude * Math.PI / 180;
var theta = ( 270 - longitude) * Math.PI / 180;
var euler = new THREE.Euler(phi, theta, 0, 'XYZ');

// rotation (using slerp)  
var qstart = new THREE.Quaternion().copy(sphere.quaternion); // src quaternion
var qend = new THREE.Quaternion().setFromEuler(euler); //dst quaternion
var qtemp = new THREE.Quaternion();

var o = {t: 0};
new TWEEN.Tween(o).to({t: 1}, 2500)
      .onUpdate(function () {
        THREE.Quaternion.slerp(qstart, qend, qtemp, o.t);
        sphere.quaternion.copy( qtemp );
      })
      .start();