threejs-animation

此 Three.js 動畫技能提供了一套完整的工具組，用於管理 3D 場景中的時間變化與動態。專為開發者與技術藝術家設計，涵蓋了 Three.js 動畫系統的核心架構，包含 AnimationClip、AnimationMixer 與 AnimationAction。無論您是要實現複雜的骨骼綁定、臉部變形目標 (Morph Targets) 表達，還是僅為 UI 元件添加程序化運動，此技能都能提供所需的 API 簽名與模式。它確保了與 GLTF/GLB 等標準 3D 檔案格式的無縫整合，並能正確處理骨骼層級與動畫狀態。

• AnimationClip 管理：針對各種軌道類型（如用於位置的 Vector3、旋轉的 Quaternion，以及用於變形的 Boolean/String 軌道）建立、儲存與操作關鍵影格資料。

• AnimationMixer 整合：跨物件層級協調動畫播放，包含動畫迴圈同步以及針對動畫完成或循環事件的處理。

• 進階 AnimationAction 控制：實現複雜的狀態管理，包含淡入淡出、動畫之間的交叉淡入淡出 (Cross-fading)、時間縮放、權重混合以及多種循環模式 (LoopOnce, LoopRepeat, LoopPingPong)。

• 骨骼動畫支援：存取與操作骨骼層級、使用 SkeletonHelper 進行除錯，並對特定關節執行程序化變更。

• 變形目標 (Morph Target) 處理：使用基於字串的軌道對網格形狀進行插值，以製作生動的臉部動畫或結構變形。

• 需要在標準的瀏覽器動畫迴圈中配合 Clock 實例，以管理 deltaTime 並確保流暢播放。

• 務必在 requestAnimationFrame 迴圈中的每一影格呼叫 AnimationMixer 的 update 方法。

• 非常適合搭配 GLTFLoader 使用，以提取並播放 3D 模型中預製的動畫。

• 適用於實現角色狀態互動（如閒置、行走、跑步、攻擊轉換），並利用累加 (Additive) 或一般 (Normal) 混合模式。

• 實作時需注意旋轉軌道需使用標準化四元數 (Normalized Quaternions)，以避免萬向鎖與插值瑕疵。