編輯關鍵幀並解析播放
本文是Three.js電子書的11.1節
Threejs提供了一系列用戶編輯和播放關鍵幀動畫的API,例如關鍵幀KeyframeTrack、剪輯AnimationClip、操作AnimationAction、混合器AnimationMixer。
爲了讓大家更好的理解關鍵幀動畫，本節課不加載外部模型的幀動畫數據，使用關鍵幀KeyframeTrack和剪輯AnimationClip編寫一個關鍵幀動畫，然後調用操作AnimationAction、混合器AnimationMixer播放編寫好的關鍵幀動畫。
創建兩個用於動畫的網格模型
先創建兩個用於關鍵幀動畫的網格模型。
/**
* 創建兩個網格模型並設置一個父對象group
*/
mesh1.name = "Box"; //網格模型1命名
mesh2.name = "Sphere"; //網格模型2命名
group.add(mesh1); //網格模型添加到組中
group.add(mesh2); //網格模型添加到組中
編輯關鍵幀
下面代碼中的關鍵幀動畫是通過關鍵幀KeyframeTrack和剪輯AnimationClip兩個API來完成，實際開發中如果需要製作一個複雜三維模型的幀動畫，比如一個人走路、跑步等動作，一般情況是美術通過3dmax、blender等軟件編輯好，不需要程序員用代碼實現。
/**
* 編輯group子對象網格模型mesh1和mesh2的幀動畫數據
*/
// 創建名爲Box對象的關鍵幀數據
var times = [0, 10]; //關鍵幀時間數組，離散的時間點序列
var values = [0, 0, 0, 150, 0, 0]; //與時間點對應的值組成的數組
// 創建位置關鍵幀對象：0時刻對應位置0, 0, 0 10時刻對應位置150, 0, 0
var posTrack = new THREE.KeyframeTrack('Box.position', times, values);
// 創建顏色關鍵幀對象：10時刻對應顏色1, 0, 0 20時刻對應顏色0, 0, 1
var colorKF = new THREE.KeyframeTrack('Box.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);
// 創建名爲Sphere對象的關鍵幀數據 從0~20時間段，尺寸scale縮放3倍
var scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]);
// duration決定了默認的播放時間，一般取所有幀動畫的最大時間
// duration偏小，幀動畫數據無法播放完，偏大，播放完幀動畫會繼續空播放
var duration = 20;
// 多個幀動畫作爲元素創建一個剪輯clip對象，命名"default"，持續時間20
var clip = new THREE.AnimationClip("default", duration, [posTrack, colorKF, scaleTrack]);
播放關鍵幀
下面代碼是通過操作AnimationAction和混合器AnimationMixer兩個API播放已有的幀動畫數據。
混合器THREE.AnimationMixer()的參數是案例代碼中編寫的兩個網格模型的父對象group，實際開發中參數Group也可以是你加載外部模型返回的模型對象。
/**
* 播放編輯好的關鍵幀數據
*/
// group作爲混合器的參數，可以播放group中所有子對象的幀動畫
var mixer = new THREE.AnimationMixer(group);
// 剪輯clip作爲參數，通過混合器clipAction方法返回一個操作對象AnimationAction
var AnimationAction = mixer.clipAction(clip);
//通過操作Action設置播放方式
AnimationAction.timeScale = 20;//默認1，可以調節播放速度
// AnimationAction.loop = THREE.LoopOnce; //不循環播放
AnimationAction.play();//開始播放
播放關鍵幀動畫的時候，注意在渲染函數render()中執行mixer.update(渲染間隔時間)告訴幀動畫系統Threejs兩次渲染的時間間隔，獲得時間間隔可以通過Threejs提供的一個時鐘類Clock實現。
// 創建一個時鐘對象Clock
var clock = new THREE.Clock();
// 渲染函數
function render() {
renderer.render(scene, camera); //執行渲染操作
requestAnimationFrame(render); //請求再次執行渲染函數render，渲染下一幀
//clock.getDelta()方法獲得兩幀的時間間隔
// 更新混合器相關的時間
mixer.update(clock.getDelta());
}
render();
