threejs 解析外部模型关键帧动画_threeedit怎么查看模型的动画

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

解析外部模型关键帧动画

前面几节课，用到的关键帧动画，是借助threejs提供的两个类 KeyframeTrack 、 AnimationClip 自己写代码实现。不过实际开发的时候，很多时候会用三维建模软件，比如Blender，生成关键帧动画，导出包含动画的模型文件，加载模型后,你只需要播放关键帧动画，而不用手写代码创建关键帧动画。

下面就给大家讲解，如果加载解析外部模型文件中的关键帧动画数据。

课件源码中提供了一个美术用Blender编辑好的关键帧动画模型文件，你可以查看预览。

关键帧动画模型的父对象作为播放器 `AnimationMixer` 参数

前面讲解过，如果你想播放一个模型的关键帧动画，需要把模型作为播放器 AnimationMixer 的参数。

//包含关键帧动画的模型对象作为AnimationMixer的参数创建一个播放器mixer
const mixer = new THREE.AnimationMixer(mesh);
即便你把mesh的父对象group作为播放器AnimationMixer的参数，播放器也能根据KeyframeTrack参数1包含的模型名字.name确定关键帧动画对应的模型对象。 
mesh.name = "Box";
const group = new THREE.Group();
group.add(mesh);
const posKF = new THREE.KeyframeTrack('Box.position', times, values);
const clip = new THREE.AnimationClip("test",6,[posKF]);
//包含关键帧动画的模型对象作为AnimationMixer的参数创建一个播放器mixer
const mixer = new THREE.AnimationMixer(group);
查看gltf模型动画数据
 
一般实际开发的时候，在三维建模软件中，创建生成动画相关数据，然后可以导出gltf、fbx等可以包含动画的文件，最后程序员通过threejs代码加载模型、解析模型包含的动画数据，下面就以gltf模型文件为例给大家演示。 
加载gltf模型，如果存在帧动画数据的话，可以通过加载返回gltf对象的动画属性.animations获取。 
const loader = new GLTFLoader(); 
loader.load("../工厂.glb", function (gltf) {
    console.log('控制台查看gltf对象结构', gltf);
    console.log('动画数据', gltf.animations);
gltf.animations是一个数组，如果没有帧动画数据，就是一个空数组，有帧动画数据的情况下，里面可能1个或多个Clip动画对象AnimationClip。 
播放AnimationClip动画
 
loader.load("../工厂.glb", function (gltf) { 
    console.log('控制台查看gltf对象结构', gltf);
    // console.log('动画数据', gltf.animations);
    model.add(gltf.scene); 
    //包含关键帧动画的模型作为参数创建一个播放器
    const mixer = new THREE.AnimationMixer(gltf.scene);
    //  获取gltf.animations[0]的第一个clip动画对象
    const clipAction = mixer.clipAction(gltf.animations[0]); //创建动画clipAction对象
    clipAction.play(); //播放动画
    // 如果想播放动画,需要周期性执行`mixer.update()`更新AnimationMixer时间数据
    const clock = new THREE.Clock();
    function loop() {
        requestAnimationFrame(loop);
        //clock.getDelta()方法获得loop()两次执行时间间隔
        const frameT = clock.getDelta();
        // 更新播放器相关的时间
        mixer.update(frameT);
    loop();
下面是在渲染循环中更新播放器时间。 
let mixer = null; //声明一个播放器变量
loader.load("../工厂.glb", function (gltf) { 
    model.add(gltf.scene);
     //包含帧动画的模型作为参数创建一个播放器
     mixer = new THREE.AnimationMixer(gltf.scene);
    //  获取gltf.animations[0]的第一个clip动画对象
     const clipAction = mixer.clipAction(gltf.animations[0]);//创建动画clipAction对象
     clipAction.play();//播放动画
 // 创建一个时钟对象Clock
 const clock = new THREE.Clock();
 function render() {
     requestAnimationFrame(render);
     if (mixer !== null) {
         //clock.getDelta()方法获得两帧的时间间隔
         // 更新播放器相关的时间
         mixer.update(clock.getDelta());
 render();
动画是否循环播放
 
人走路、跑步美术美术一般设置很短时间运动，如果你想一直看到运动动作，不用设置非循环。 
//不循环播放
clipAction.loop = THREE.LoopOnce; 
// 物体状态停留在动画结束的时候
clipAction.clampWhenFinished = true
                                    详细介绍了Threejs中的动画API，并通过一个实例实现了移动动画和旋转动画，对Threejs中的关键帧轨道、动画剪辑、动画混合器和动画动作进行了详细介绍
                                    骨骼网格模型的关键帧动画，一般都是美术在三维软件中，通过关键帧动画控制骨骼关节变化实现。数组里面第一个关节对应了Blender中根关节，你点开该关节Bone，可以层层展开下去，查看它的子关节，查看子关节的子关节…是一个数组包含了所有骨骼关节，你可以和三维软件中骨骼模型骨骼节点目录对照，观察关节属性。几个骨骼关节旋转了一定角度，你可以打开代码，观察骨骼网格模型的外形变化。下面给大家演示，加载一个外部骨骼动画模型，查看骨骼结构，并播放动画。你可以参考上面测试，把课件士兵骨骼动画文件，作为练习题，测试一遍。
                                    执行动画播放器AnimationMixer的clipAction()方法会返回一个AnimationAction对象。AnimationAction对象的功能就是用来控制如何播放关键帧动画，比如是否播放、几倍速播放、是否循环播放、是否暂停播放等等。Bone骨骼是threejs的一个类，用来模拟人或动物的骨骼，他的父节点是Object3D，继承了位置属性position、旋转属性rotation等等。在开发过程中，有时候会用三维建模软件设置动画，一起跟随模型导出文件，这时候，只需要播放文件中的动画即可。
                                    在这个教程中，我们将介绍 Theatre.js 的基础知识并探索如何制作令人惊叹的动画序列。我们将演示如何为 Three.js 立方体制作动画、集成引人注目的视觉效果、修改颜色、试验 HTML 元素以及以特定时间间隔将动画与声音播放同步。推荐：用快速搭建可编程3D场景。
                                    如果你想了解,关键帧动画在特定时间段播放，或者把动画定位在时间轴上任何一个时刻，或者借助UI拖动条，拖动查看关键帧任何时刻的状态，可以学习本节课。实际开发时候，你可以通过vue或react的UI组件库实现拖动条。对播放效果的影响,如果需要上面代码完全起作用，要设置非循环模式，同时动画播放完，物体停留在结束状态，而不是回到开始状态。，默认播放0~6秒之间的关键帧动画。点击按钮，模型调整到time累加0.1秒对应的动画状态。默认是播放的，可以预先暂停，再通过拖动条控制。把动画设置为暂停状态，然后你可以通过。
                                    播放设置(暂停、时间段、时间点)
本文是Three.js电子书的11.3节
你可以通过剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer的属性或方法完成一些播放效果。
播放/暂停(.paused属性)
<button onclick="pause()" type="button" style="position: absolute;padd...
                                    关键帧动画是通过关键帧KeyframeTrack和剪辑AnimationClip两个API来完成，实际开发中如果需要制作一个复杂三维模型的帧动画，比如一个人走路、跑步等动作，一般情况是美术通过3dmax、blender等软件编辑好，不需要程序员用代码实现。动画可以存在于模型中，也可以单独定义。播放关键帧动画的时候，注意在渲染函数render()中执行mixer.update(渲染间隔时间)告诉帧动画系统Threejs两次渲染的时间间隔，获得时间间隔可以通过Threejs提供的一个时钟类Clock实现。

解析外部模型关键帧动画

关键帧动画模型的父对象作为播放器 AnimationMixer 参数

查看gltf模型动画数据

播放AnimationClip动画

动画是否循环播放

关键帧动画模型的父对象作为播放器 `AnimationMixer` 参数

播放`AnimationClip`动画