Three.js---动画

帧动画

编辑关键帧并解析播放

1. 创建网格模型
2. 通过KeyframeTrack编辑关键帧
3. 混合器AnimationMixer，可播放参数中所有子对象的帧动画。
4. 剪辑clip作为参数，通过混合器clipAction方法返回AnimationAction操作对象。
5. 操作Action设置播放方式
6. AnimationAction.play()，开始播放
7. 渲染。为了帧动画的连贯性，播放关键帧动画的时候，需要在渲染函数render()执行mixer.update(渲染间隔时间）告诉帧动画系统两次渲染的时间间隔。间隔时间可通过时钟类Clock实现。

//创建场景对象        
var scene = new THREE.Scene();
/**        
* 创建两个网格模型并设置一个父对象group        
* */       
// 球体网格模型创建函数        
function sphereMesh(R, x, y, z) {
          
var geometry = new THREE.SphereGeometry(R, 25, 25); //球体几何体        
var material = new THREE.MeshPhongMaterial({
               
	color: 0x0000ff        
	}); //材质对象Material        
	var mesh = new THREE.Mesh(geometry, material); // 创建网格模型对象        	  mesh.position.set(x, y, z);        
	return mesh;        
}        
var mesh1 = sphereMesh(10, 0, 0, 0);        
var mesh2 = sphereMesh(20, 0, 0, 0);        
mesh1.name = "Box"; //网格模型1命名        
mesh2.name = "Sphere"; //网格模型2命名        
var group = new THREE.Group();        
group.add(mesh1); //网格模型添加到组中        
group.add(mesh2); //网格模型添加到组中        
scene.add(group);

/**        
* 编辑group子对象网格模型mesh1和mesh2的帧动画数据        
*/        
// 创建名为Box对象的关键帧数据        
var times = [0