Three - Euler vs Quaternion 比較

Quaternion vs Euler

在 Three.js 中，旋轉可以使用兩種主要方式表示：Quaternion（四元數）和 Euler（歐拉角）。這兩種方法各有優缺點，根據不同情況選擇最適合的旋轉方式至關重要。

1. 何時使用 Euler（歐拉角）

用途：

• 簡單、直觀的旋轉：
  如果只需要繞單一軸（X、Y、Z）旋轉，且不需要考慮複雜的旋轉組合，Euler 是簡單直觀的選擇。例如，繞 X 軸旋轉 45 度、Y 軸旋轉 30 度，使用 Euler 會非常直覺。

  object.rotation.set(Math.PI / 4, Math.PI / 6, 0); // 旋轉 45° 和 30°（繞 X 和 Y 軸）

• 動畫和場景中的簡單旋轉：
  在簡單的動畫或場景中，Euler 旋轉方式足夠使用，因為它在多數情況下容易理解和實現。

• 對萬向鎖不敏感的情況：
  如果旋轉範圍限制不大，且旋轉的軸不會交叉（例如每個旋轉的軸都相對獨立），那麼 Euler 就不會受到萬向鎖的影響。

優點：

• 直覺易懂，適合簡單旋轉
• 適合單一軸旋轉或少量旋轉

缺點：

• 萬向鎖（Gimbal Lock）問題：當三個旋轉軸之一接近 90° 時，會發生萬向鎖，導致旋轉行為不正確
• 不適用於複合旋轉：多軸旋轉時容易造成問題，無法有效組合旋轉

2. 何時使用 Quaternion（四元數）

用途：

• 避免萬向鎖（Gimbal Lock）：
  當需要處理複雜的三維旋轉，並且需要避免萬向鎖時，Quaternion 是最佳選擇。四元數旋轉是基於四維空間的運算，能夠保證不會出現萬向鎖問題。

• 多軸複合旋轉：
  當需要結合多個旋轉（例如先繞 X 軸旋轉，再繞 Y 軸旋轉）時，Quaternion 可以有效避免不同軸間的互相影響。

  const q1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI / 4, 0, 0)); // 旋轉 45°（繞 X 軸）
  const q2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI / 4, 0)); // 旋轉 45°（繞 Y 軸）
  
  object.quaternion.multiplyQuaternions(q1, q2); // 組合旋轉

• 動態或插值動畫：
  四元數非常適合做旋轉插值（例如在動畫過程中）或在 3D 物件間平滑過渡旋轉。

優點：

• 避免萬向鎖：Quaternion 使用四維數學運算來表示旋轉，能夠避免萬向鎖問題，適合於複雜旋轉
• 多軸旋轉組合：適用於多軸的複合旋轉，且不會受到不同軸之間交叉的影響
• 更精確的動畫控制：四元數插值可避免 Euler 的角度限制，使旋轉過程更平滑，避免不自然的轉動

缺點：

• 較為抽象：四元數的數學原理不如 Euler 直觀，理解和操作起來稍微複雜
• 需要額外的轉換：有時需要將 Quaternion 與 Euler 進行相互轉換，可能增加額外的計算量

3. Quaternion 和 Euler 的選擇建議

使用 Euler：

• 當旋轉僅涉及單一軸或少量軸時
• 當需要直覺化地設置旋轉（例如調整 x、y 和 z 角度）
• 當旋轉的軸不會交叉，且不需要處理大量的複雜旋轉時

使用 Quaternion：

• 當需要處理複雜的多軸旋轉，並希望避免萬向鎖問題
• 當需要進行平滑的旋轉插值（例如動畫）
• 當旋轉涉及多個物件並且需要高效處理時

4. 結論

• Euler角是較為簡單直觀的方法，適合用於單軸或少量旋轉，並且可以快速實現簡單的旋轉邏輯。

• Quaternion是用於避免萬向鎖且能夠處理複雜多軸旋轉的理想選擇。它適用於需要平滑過渡和高效控制的情境，尤其是在處理 3D 物件動畫和多軸旋轉時。

選擇合適的旋轉方式取決於應用需求，對於簡單的旋轉，Euler 可能更方便；而在處理更複雜的旋轉或避免萬向鎖時，Quaternion 更為可靠。