threejs 动画系统

阅读数:3 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、动画片段 animation clips

每个animationClip通常保存3D动画对象某个活动的数据。举个例子,假如mesh是一个角色,可能有一个AnimationClip实现步行循环,第二个AnimationClip实现跳跃,第三个AnimationClip实现闪避等等。

二、关键帧轨道 Keyframe Tracks

在一个AnimationClip里面,每个动画属性的数据都存储在一个单独的KeyframeTrack中。

三、动画混合器 Animation Mixer

存储的数据仅构成动画的基础,实际播放由AnimationMixer控制。

四、动画行为 Animation Actions

Animation Actions本身只有很少的属性和方法,因为它可以通过AnimationActions来控制,通过配置AnimationAction,可以决定何时播放、暂停或停止其中一个混合器的某个AnimationClip,这个AnimationClip是否需要重复播放以及重复的频率,是否需要使用淡入淡出或时间缩放等。

 

注间:并非所有模型格式都包含动画(尤其是OBJ,没有),而且只有某些three.js加载器支持AnimationClip序列。以下几个加载器支持动画:

1、ObjectLoader

2、BVHLoader

3、ColladaLoader

4、FBXLoader

5、GLTFLoader

6、MMDLoader

7、SEA3DLoader

另外,3ds max和maya当前无法直接导出多个动画到一个文件中(这意味着动画不是在同一时间线上)。

 

示例

var mesh;

// 新建一个AnimationMixer, 并取得AnimationClip实例列表
var mixer = new THREE.AnimationMixer( mesh );
var clips = mesh.animations;

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

// 播放一个特定的动画
var clip = THREE.AnimationClip.findByName( clips, 'dance' );
var action = mixer.clipAction( clip );
action.play();

// 播放所有动画
clips.forEach( function ( clip ) {
	mixer.clipAction( clip ).play();
} );