Three.js開發指南(9):建立動畫和移動相機

CopperDong發表於2018-04-22

   介紹Three.js是如何支援動畫操作的,四個主題:

  • 基礎動畫:修改物件的三個屬性,位置、旋轉和縮放
  • 移動相機:在場景中移動相機的能力
  • 變形和蒙皮:製作複雜模型的動畫主要有兩種方式。使用變形技術,定義幾何體之間的過度;以及使用骨骼和蒙皮技術處理這種過渡
  • 載入外部動畫:從外部檔案中載入動畫

9.1 基礎動畫

    使用requestAnimationFrame函式

    用Tween.js做動畫:這個庫可以用來定義某個屬性在兩個值之間的過渡,自動計算出起始值和結束值之間的所有中間值。這個過程叫做tweening(補間),如從10變化到3,可以指定在指定時間內屬性如何變化,是線性的、指數性的,還是其他任何可能的方式。

9.2 使用相機

     Three.js提供了幾個相機控制元件,可以用來控制場景中的相機。


軌跡球控制元件:

9.3 變形動畫和骨骼動畫

    有兩種主要的定義動畫的方式:


9.4 使用外部模型建立動畫

   三維檔案格式



相關文章