使用按钮交互重播 ThreeJs 动画

如何解决使用按钮交互重播 ThreeJs 动画

我正在 8th Wall 上开发 Web-AR 动画，并且有一个包含 5 个动画的模型。这些动画属于模型的不同组件。我想通过屏幕上的按钮与动画交互。由于这些按钮，有时可以同时播放多个动画。

这是我的问题：

我想不止一次播放这些动画，而且它们需要在最后一帧暂停。我在网上搜索了关于动画在最后一帧暂停的信息，我发现了动画混合器组件的“clampWhenFinished”属性。

问题是，如果我将“clampWhenFinished: true”属性与“loop: repeat”一起使用，它不会在最后一帧停止。另一方面，如果我将“clampWhenFinished: true”属性与“loop: once”一起使用，它会在最后一帧停止，但是当我再次按下启动相同动画的按钮时，它不会再次播放动画。>

您可以在下面看到相关的代码片段。我试图用超时函数处理上面的问题，但它导致了很多错误。除此之外，我尝试使用“timeScale”属性来处理这个问题，因为我无法将“clampWhenFinished: true”属性与“loop: repeat”一起使用。

const modelTop = document.getElementById('model_top')
const animationList = ['Animation_Door_Open','Animation_Door_Close','Animation_Basket_Low','Animation_Basket_Mid','Animation_Basket_Top']

topButton.onclick = topBasket
// Play animation.
const topBasket = () => {
  modelTop.setAttribute('animation-mixer',{
    clip: animationList[4],timeScale: 1,loop: 'repeat',})

// Pause animation.
  setTimeout(() => {
    modelTop.setAttribute('animation-mixer',{
      clip: animationList[4],timeScale: 0,})
  },1900)
}

// Play animation reverse.
const topReverse = () => {
  modelTop.setAttribute('animation-mixer',timeScale: -1,})

  // Pause animation.
  setTimeout(() => {
    modelTop.setAttribute('animation-mixer',1800)
  isTopOpen = false
}

第二个问题是，我想在其他动画完成时触发一个动画。有没有像“事件监听器”这样的选项来解决这个问题？