Three.js - 关键帧插值答案

【问题标题】：Three.js - keyframe interpolationThree.js - 关键帧插值
【发布时间】：2020-02-16 01:58:12
【问题描述】：

通过将对象的比例设置为 0 来禁用对象时，我遇到了一些问题。

设置：

我在第 50 帧中获得了一个比例为 1 且在第 51 帧中比例为 0 的立方体。

我基本上使用它来禁用动画中的对象（使用 gltf 或 fbx）。当我在 three.js 中播放动画时，似乎关键帧以某种方式被插值了。所以 Scale 1 和 Scale 0 之间有一点小故障。

Have a look here

到目前为止我尝试了什么：

将动画的帧速率设置为 60fps
在 three.js 中设置 50fps 的固定帧速率并将动画设置为 50fps
从不同的程序（电影 4d 和搅拌机）导出
以不同格式导出（gltf 和 fbx）

感觉three.js还在对动画做一些插值。

有人知道解决方法吗？

【问题讨论】：

请在问题中包含您使用的代码。
我已经添加了我的代码 ;)
你有没有想过这个问题？有同样的问题
@TimLupo 我刚刚发布了我的解决方案。

标签： animation three.js gltf

【解决方案1】：

我找到了解决问题的方法，但忘记在此处发布；）

因此您的动画必须以 50 fps 的速度导出。

然后将您的动画功能设置为 50 fps：

function animate() {
    setTimeout( function() {
        requestAnimationFrame( animate );
    }, 1000 / 50 );
    //stats.update();
    controls.update();
    render();
}

现在您必须使用THREE.InterpolateDiscrete“关闭”每个轨道的关键帧插值

gltf.animations.forEach(( clip ) => {
    for ( track in gltf.animations[ 0 ].tracks) {
        gltf.animations[ 0 ].tracks[track].setInterpolation (THREE.InterpolateDiscrete);
    }
    gltf.animations[ 0 ].tracks[0]
    const animation = mixer.clipAction(clip);
    mixer.clipAction( gltf.animations[ 0 ] ).play();
    animation.play();
});

【讨论】：