three.js 動(dòng)畫系統(tǒng)

概述

在three.js動(dòng)畫系統(tǒng)中，您可以為模型的各種屬性設(shè)置動(dòng)畫： SkinnedMesh（蒙皮和裝配模型）的骨骼，morph targets（變形目標(biāo)）， 不同的材料屬性（顏色，不透明度，布爾運(yùn)算），可見性和變換。動(dòng)畫屬性可以淡入、淡出、交叉淡化和扭曲。 在相同或不同物體上同時(shí)發(fā)生的動(dòng)畫的權(quán)重和時(shí)間比例的變化可以獨(dú)立地進(jìn)行。 相同或不同物體的動(dòng)畫也可以同步發(fā)生。

為了在一個(gè)同構(gòu)系統(tǒng)中實(shí)現(xiàn)所有這一切， three.js的動(dòng)畫系統(tǒng)在2015年徹底改變（注意過時(shí)的信息?。?， 它現(xiàn)在有一個(gè)與Unity/虛幻4引擎類似的架構(gòu)。此頁面簡(jiǎn)要闡述了這個(gè)系統(tǒng)中的主要組件以及它們?nèi)绾螀f(xié)同工作。

動(dòng)畫片段（Animation Clips）

如果您已成功導(dǎo)入3D動(dòng)畫對(duì)象（無論它是否有骨骼或變形目標(biāo)或兩者皆有都不要緊）—— 例如使用glTF Blender exporter（glTF Blender導(dǎo)出器） 從Blender導(dǎo)出它并使用GLTFLoader將其加載到three.js場(chǎng)景中 —— 其中一個(gè)響應(yīng)字段應(yīng)該是一個(gè)名為“animations”的數(shù)組， 其中包含此模型的AnimationClips（請(qǐng)參閱下面可用的加載器列表）。

每個(gè)AnimationClip通常保存對(duì)象某個(gè)活動(dòng)的數(shù)據(jù)。 舉個(gè)例子，假如mesh是一個(gè)角色，可能有一個(gè)AnimationClip實(shí)現(xiàn)步行循環(huán)， 第二個(gè)AnimationClip實(shí)現(xiàn)跳躍，第三個(gè)AnimationClip實(shí)現(xiàn)閃避等等。

關(guān)鍵幀軌道（Keyframe Tracks）

在這樣的AnimationClip里面，每個(gè)動(dòng)畫屬性的數(shù)據(jù)都存儲(chǔ)在一個(gè)單獨(dú)的KeyframeTrack中。 假設(shè)一個(gè)角色對(duì)象有Skeleton（骨架）， 一個(gè)關(guān)鍵幀軌道可以存儲(chǔ)下臂骨骼位置隨時(shí)間變化的數(shù)據(jù)， 另一個(gè)軌道追蹤同一塊骨骼的旋轉(zhuǎn)變化，第三個(gè)追蹤另外一塊骨骼的位置、轉(zhuǎn)角和尺寸，等等。 應(yīng)該很清楚，AnimationClip可以由許多這樣的軌道組成。

假設(shè)模型具有morph Targets（變形目標(biāo)）—— 例如一個(gè)變形目標(biāo)顯示一個(gè)笑臉，另一個(gè)顯示憤怒的臉 —— 每個(gè)軌道都持有某個(gè)變形目標(biāo)在AnimationClip運(yùn)行期間產(chǎn)生的Mesh.morphTargetInfluences（變形目標(biāo)影響）如何變化的信息。

動(dòng)畫混合器（Animation Mixer）

存儲(chǔ)的數(shù)據(jù)僅構(gòu)成動(dòng)畫的基礎(chǔ) —— 實(shí)際播放由AnimationMixer控制。 你可以想象這不僅僅是動(dòng)畫的播放器，而是作為硬件的模擬，如真正的調(diào)音臺(tái)，可以同時(shí)控制和混合若干動(dòng)畫。

動(dòng)畫行為（Animation Actions）

AnimationMixer本身只有很少的（大體上）屬性和方法， 因?yàn)樗梢酝ㄟ^AnimationActions來控制。 通過配置AnimationAction，您可以決定何時(shí)播放、暫?；蛲Ｖ蛊渲幸粋€(gè)混合器中的某個(gè)AnimationClip， 這個(gè)AnimationClip是否需要重復(fù)播放以及重復(fù)的頻率， 是否需要使用淡入淡出或時(shí)間縮放，以及一些其他內(nèi)容（例如交叉漸變和同步）。

動(dòng)畫對(duì)象組（Animation Object Groups）

如果您希望一組對(duì)象接收共享的動(dòng)畫狀態(tài)，則可以使用AnimationObjectGroup。

支持的格式和加載器（Supported Formats and Loaders）

請(qǐng)注意，并非所有模型格式都包含動(dòng)畫（尤其是OBJ，沒有）， 而且只有某些three.js加載器支持AnimationClip序列。 以下幾個(gè)確實(shí)支持此動(dòng)畫類型：

• THREE.ObjectLoader
• THREE.BVHLoader
• THREE.ColladaLoader
• THREE.FBXLoader
• THREE.GLTFLoader
• THREE.MMDLoader

請(qǐng)注意，3ds max和Maya當(dāng)前無法直接導(dǎo)出多個(gè)動(dòng)畫（這意味著動(dòng)畫不是在同一時(shí)間線上）到一個(gè)文件中。

范例

let mesh;

// 新建一個(gè)AnimationMixer, 并取得AnimationClip實(shí)例列表
const mixer = new THREE.AnimationMixer( mesh );
const clips = mesh.animations;

// 在每一幀中更新mixer
function update () {
	mixer.update( deltaSeconds );
}

// 播放一個(gè)特定的動(dòng)畫
const clip = THREE.AnimationClip.findByName( clips, 'dance' );
const action = mixer.clipAction( clip );
action.play();

// 播放所有動(dòng)畫
clips.forEach( function ( clip ) {
	mixer.clipAction( clip ).play();
} );