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

Question

我需要一些帮助。

我已经搜索过，但找不到解决方案，因为所有解决方案都是关于围绕球体旋转相机。

就我而言，相机是静止的。 我有一个webgl地球，周围使用经度和纬度指向。 我只想单击一个点并旋转Globe网格，使其居中。

我的意思是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, ot); sphere.quaternion.copy( qtemp ); }) .start();