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

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 旋转值会上升。然后按照上面的建议补间旋转会导致大量反向旋转，直到该点显示在相机中心。

为避免这种情况，可以通过 四元数 设置旋转。补间必须使用时间四元数进行处理。 出于演示目的，我将球体的初始 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();