蒙古文政务网站群建设工作方案百度广告推广怎么做

Three.js小白的学习之路。

这段时间工作上要制作一个开关门的关键帧动画。结果在实现过程中出现了倒放失败、倒放时动画直接回到初始状态等问题。下面来一一地分析。

一开始的想法是，在blender中为模型添加上相应的动画，然后再代码进行控制，正放就是timescale为1，倒放就是-1，每次动画只播放一次，动画结束后，让其停留在结束位置即可。动画时长为1s。

为此写下了以下代码：

const open = ref(true);
let mixer;
const actions = [];new GLTFLoader().load("/openDoor.glb", (glb) => {const mesh = glb.scene;scene.add(mesh);mesh.rotateY(-Math.PI / 2);const aniList = glb.animations.filter((item) => item.name.startsWith("door"));mixer = new Three.AnimationMixer(mesh);aniList.forEach((item) => {const action = mixer!.clipAction(item);actions.push(action);});
});const openDoor = () => {actions.forEach((action) => {action.play();action.timeScale = open.value ? 1 : -1;action.loop = Three.LoopOnce;action.clampWhenFinished = true; // 动画结束停留在结束位置});open.value = !open.value;
};

写了一个按钮，用于控制open的value，并执行相应的动画操作。设置了clampWhenFinished为true，使动画结束后留在结束位置。

效果如下：

发现，无法倒放。查询得知，使用了clampWhenFinished时，需要调用reset方法进行重置，才可以。于是加上之后的代码：

const openDoor = () => {actions.forEach((action) => {action.reset(); // 重置状态action.play();action.timeScale = open.value ? 1 : -1;action.loop = Three.LoopOnce;action.clampWhenFinished = true; // 动画结束停留在结束位置});open.value = !open.value;
};

效果如下：

 点击之后发现，门瞬间关闭，并不是我想象中的动画倒放。

于是我针对action的状态进行了查看：

const openDoor = () => {actions.forEach((action) => {action.reset();action.play();action.timeScale = open.value ? 1 : -1;action.loop = Three.LoopOnce;action.clampWhenFinished = true; // 动画结束停留在结束位置open &&setTimeout(() => {action!.paused = true;}, 500);!open && (action!.paused = true);});console.log(actions);open.value = !open.value;
};

我让其在0.5s时停止动画，倒放时立即停止。

观察到，即使立即停止，倒放点击时依然是直接回到了原始状态。打印结果如下图所示：

(0.5s停止)

(倒放直接停止)

可以看到，time清零了。

至此问题就已经看清楚了，是因为reset方法使time清0，导致倒放从0s->0s，等于立即结束。

因此解决方法有以下两种：

1.自己手动将时间设置到动画结束的时间

const openDoor = () => {actions.forEach((action) => {action.reset();action.play();action.timeScale = open.value ? 1 : -1;action.time = open.value ? 0 : action.getClip().duration; // 保证倒放正常播放action.loop = Three.LoopOnce;action.clampWhenFinished = true; // 动画结束停留在结束位置});open.value = !open.value;
};

2.探究一下clampWhenFinished属性

经过控制台打印可以看到(全过程动画结束后的控制台打印)，设置clampWhenFinished为true是，动画的paused变成了true，也就是动画暂停了。

因此可以猜测clampWhenFinished的原理就是在动画结束时的前一刻，使动画暂停，从而完成动画结束后停留在原位置的操作。因此我们在倒放时只需要手动的将paused属性置为false即可。

const openDoor = () => {actions.forEach((action) => {action.play();action.paused = false;action.timeScale = open.value ? 1 : -1;action.loop = Three.LoopOnce;action.clampWhenFinished = true; // 动画结束停留在结束位置});open.value = !open.value;
};

当然，这样就不需要使用reset方法了。

最终效果如图：