【10】three进阶——动画系统（Animation system）

139 2024-09-08

动画 AnimationClip 变形 three.js AnimationMixer

我们非常重视原创文章，为尊重知识产权并避免潜在的版权问题，我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容，访问作者的公众号页面获取完整文章。

查看原文：【10】three进阶——动画系统（Animation system）

文章来源：

小南瓜开发平台

扫码关注公众号

Three.js Animation System Summary

概述

Three.js动画系统允许为模型的骨骼、变形目标、材料属性、可见性和变换等设置动画。这些动画特性可以经历淡入、淡出、交叉淡化和扭曲，其权重和时间比例的变化可以独立进行，也可以实现动画之间的同步。Three.js的动画系统于2015年重构，采用了类似Unity和虚幻4引擎的架构，本文将介绍其主要组件及协同方式。

动画片段（Animation Clips）

动画片段是包含模型某个活动数据的数组，例如角色的步行、跳跃和闪避动作。通过使用兼容的加载器，如GLTFLoader，可以将这些动画片段导入到three.js中。

关键帧轨道（Keyframe Tracks）

在AnimationClip中，不同的动画属性通过关键帧轨道来存储数据。这些轨道可以独立追踪骨骼的位置、旋转变化或者是变形目标影响的变化。

动画混合器（Animation Mixer）

动画混合器控制存储数据的播放，类似于调音台，它可以同时控制和混合多个动画片段。

动画行为（Animation Actions）

AnimationMixer通过AnimationActions来控制，这些动作决定了动画片段的播放、暂停或停止，以及是否需要重复播放、使用淡入淡出或时间缩放等。

动画对象组（Animation Object Groups）

当需要一组对象共享动画状态时，可以使用AnimationObjectGroup来实现。

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

不是所有模型格式都包含动画，且只有特定的three.js加载器支持AnimationClip序列。支持动画的加载器包括ObjectLoader, BVHLoader, ColladaLoader, FBXLoader, GLTFLoader和MMDLoader。需要注意的是，3ds max和Maya无法直接导出多个动画到同一个文件中。

示例：

        let mesh;
        // 新建一个AnimationMixer, 并取得AnimationClip实例列表
        const mixer = new THREE.AnimationMixer(mesh);
        const clips = mesh.animations;
        // 在每一帧中更新mixer
        function update () {
            mixer.update(deltaSeconds);
        }
        // 播放一个特定的动画
        const clip = THREE.AnimationClip.findByName(clips, 'dance');
        const action = mixer.clipAction(clip);
        action.play();
        // 播放所有动画
        clips.forEach(function (clip) {
            mixer.clipAction(clip).play();
        });