如何通过onmouseover事件在一个框架中控制.gtlf2网格动画？

Question

我试图在鼠标悬停时控制（开始/停止）gtlf动画。我找到了一个很好的示例，但是它依赖于.json格式的模型：

示例：https://rexraptor08.github.io/animation-controls/

来源：https://github.com/rexraptor08/animation-controls

问题是我不再能够从Blender中导出.json格式，因为该插件已被移除：https://github.com/mrdoob/three.js/tree/dev/utils/exporters/blender

有人知道如何实现这一目标吗？

Answer 1

您可以使用animation-mixer组件来使用glTF动画。

首先，您需要使用Kupoman's exporter导出模型。我曾经使用过Khronos组，但是在导出带有多个动画的模型时遇到了麻烦。

一旦导出了模型，只需添加aframe-extras，即可使用动画加载器。

然后您可以像这样使用它：

<a-entity gltf-model="url(model.gltf)"
   animation-mixer="clip: DoStuff;"></a-entity>

---

如果要通过任何事件开始动画，只需创建一个component，它将设置animation-mixer：

this.el.addEventListener("click", (e)=> {
  this.el.setAttribute("animation-mixer", "clip", "DoStuff") 
})

还请务必查看Don McCurdys guide。