javascript - 三个JS轨道相机短旋转

Question

我有一个轨道相机，轨道是一个地球。用户可以点击地球上的多个标记，然后相机将移动到该点。

像这样使用 TweenMax 制作动画 -

 TweenMax.to(currentPos, 3, {
     theta:targetPos.theta, 
     phi:targetPos.phi, 
     radius:targetPos.radius, 
     ease:Circ.easeIn, 
     onComplete:btnZoomComplete,
     onUpdateParams:["{self}"], 
     onComplete:SataliteTweenComplete, 
     onUpdate: function(tween) {
       controls.setThetaPhi(tween.target.theta, tween.target.phi, tween.target.radius);
     }
});

这很好用，但是没有考虑到达那里的最短路线。所以它经常可以“绕地球的背面”。

ThreeJS 似乎在一个非常奇怪的单位系统中测量 Angular :0、1.57(相当于 90 度)、3.14(eq 180dg)，然后在 3.14 跳转到 -3.14、-1.57(相当于 270dg)，然后回到 0...所以这让我对如何工作感到震惊出。

例如，假设相机在 2.6 并且它需要转到 -2.61，此时相机将以 CCW 动画(2.6 到 -2.16)，而作为视觉它需要以 CW 动画，它会从2.6 到 3.14，-3.14 然后到 -2.61。

如有任何帮助，我们将不胜感激。

我想有两个问题，如何计算出绕过哪条路，然后如何真正地从 2.6 -> 3.14 动画，无缝地跳到 -3.14 -> -2.61

Answer 1

所以“奇怪的单位系统”就是radians在 -180° 到 180° 和 -90° 到 90° 范围内测量 theta/phi 值是很常见的(想想纬度/经度，同样的事情)。转换很简单:

angleDegrees = radians / Math.PI * 180;
radians = angleDegrees / 180 * Math.PI;

现在补间库只会从一个值插入到另一个值，而不知道这些值代表什么。因此，当涉及到旋转时，它根本不知道如何处理最短路径。但是，您可以在开始补间之前执行此操作。

假设我们将动画设置为从 2.6 到 -2.6(或 149° 到 -149°)。

var from = 2.6, to = -2.6;

动画的方向和 Angular 距离可以计算为

var distance = to - from; 
// === -5.2

此处的负值表示逆时针方向，5.2(~298°)是相机将移动的“距离”。现在请记住，任何正负 360° 的 Angular (2 * Math.PI) 基本上都会让您到达相同的位置。所以让我们试试:

var distance = (to + 2 * Math.PI) - from; 
// === 1.083185307179586 (~62°)

因此，如果您从 2.6 的位置旋转到 -2.6 + 2 * Math.PI(或者，从 149° 到 -149° + 360° = 211°)，你会得到一个路径更短的顺时针动画。

为了确保所有值都在允许的范围内，我们稍微更改了 onUpdate 函数以正确环绕:

controls.setThetaPhi(
    tween.target.theta % Math.PI, 
    tween.target.phi % Math.PI, 
    tween.target.radius);

您可能还想在动画开始之前和下面的计算发生之前用实际值更新 currentPos 值。

剩下要做的是针对一般情况解决此问题，以便找出何时进行顺时针和逆时针旋转。要查看反过来是否会更短，我们只需要查看距离是否大于 180°:

if (Math.abs(to - from) > Math.PI) {
  if (to > 0) { // if to is positive we remove a full-circle, add it otherwise
    to = to - 2 * Math.PI;
  } else {
    to = to + 2 * Math.PI;
  }
}