Three.js - KeyframeTrack 帧动画

THREE.KeyframeTrack是用来设置动画的对象，以一定的时间过渡到一定值的对象。

1、KeyframeTrack 对象

1.1、构造函数

KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )
name、 一个帧动画的标识符，指以这个标识进行帧动画
times、时间数组，内部会转换为Float32Array
values、帧数组，在times时间内所要执行的数值，Float32Array类型
interpolation、常用差值模式（离散的，线性，平滑），默认是InterpolateLinear线性，是一个常量

常量设置参考 Animation Constants

1.2、使用示例

例如：让一个几何体BoxGeometry在10秒内从向量Vector3(0, 0, 0)平滑过渡到Vector3(100, 0, 0)，那么可以通过KeyframeTrack来创建帧动画对象。

var times = [0, 10];.//离散的时间序列
var values = [0, 0, 0, 100, 0, 0];//过渡的值

// 创建帧动画对象，使box几何体，在10秒内移动到(100, 0, 0)的位置
var posKeyframeTrack = new THREE.KeyframeTrack('box.position', times, values)

这个帧动画是以几何体的position属性进行线性过渡的，同样可以使几何体的材质属性以及其他是离散值的属性都可以进行帧跟踪变化。

1.3、小示例

如图需要实现的效果，需要三个几何体对象在特定的时间，位置和颜色的过渡。

1.3.1、创建几何体

1、首先，需要创建三个几何体，并且把他们放到一个Group中，然后加入到场景中。

var group = new THREE.Group();

var geometry = new THREE.BoxGeometry(10, 10, 10);

var material = new THREE.MeshLambertMaterial({
   color: 0xff0000});
var materia2 = new THREE.MeshLambertMaterial({
   color: 0x00ff00});
var materia3 = new THREE.MeshLambertMaterial({
   color: 0x0000ff});

var box1 = new THREE.Mesh(geometry, material);
var box2 = new THREE.Mesh(geometry, materia2);
var box3 = new THREE.Mesh(geometry, materia3);
box1.name = 'box1';
box2.name = 'box2';
box3.name = 'box3';

group.add(box1, box2, box3);

scene.add(group);

2、然后，分别创建关于这三个几何体的KeyframeTrack对象，进行位置和颜色的变化

/*1、创建帧动画序列 KeyframeTrack */
var times = [0, 10];

/* 离散的时间点序列 */
var position_x = [0, 0, 0, 100, 0, 0];
var position_y = [0, 0, 0, 0, 100, 0];
var position_z = [0, 0, 0, 0, 0, 100];

/* 在 times 时间执行的过渡值  Float32Array 类型 */
var color_r = [1, 0, 0, 0, 1, 0];
var color_g = [0, 1, 0, 0, 0, 1];
var color_b = [0, 0, 1, 1, 0, 0];

上面分别以类型化数组的形式定义了，需要过渡的点和颜色。
3、创建KeyframeTrack对象

/* 创建 KeyframeTrack 对象 0 -- 10 之内位置变化*/
var pos1_Keyframe = new THREE.KeyframeTrack('box1.position', times, position_x);
var pos2_Keyframe = new THREE.KeyframeTrack('box2.position', times, position_y);