ThreeJS Oribital相機短時旋轉

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似乎是在一個非常奇怪的單位系統中測量角度：0、1.57（相當於90度），3.14（等於180dg），然后在3.14之后跳到-3.14，-1.57（等於270dg），然后又回到0 ...這讓我大吃一驚。

例如，假設攝影機處於2.6且需要移至-2.61，此刻攝影機將對CCW進行動畫處理（2.6到-2.16），在視覺上它需要對CW進行動畫處理，而CW將從2.6變為3.14。 ，則-3.14，然后變為-2.61。

任何幫助，將不勝感激。

我猜有兩個問題，如何弄清楚該怎么回事，然后如何從2.6-> 3.14進行動畫處理，無縫跳轉到-3.14-> -2.61

Answer 1

因此，“奇怪的單位制”只是弧度 ，因此通常在-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;

動畫的方向和角度距離可以計算為

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

此處的負值表示逆時針方向，而5.2 （〜298°）是相機移動的“距離”。 現在請記住，任何正負360°（ 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-function進行了一些更改以正確地進行環繞：

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;
  }
}