animation - onmouseover イベントでフレーム内の .gtlf2 メッシュ アニメーションを制御するにはどうすればよいですか?

Question

マウスオーバーで gtlf アニメーションを制御 (開始/停止) しようとしています。良い例を見つけましたが、モデルが .json 形式であることに依存しています。

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

ソース: https://github.com/rexraptor08/animation-controls

問題は、アドオンが削除されたため、ブレンダーから .json 形式をエクスポートできなくなったことです: https://github.com/mrdoob/three.js/tree/dev/utils/exporters/blender

これを達成する方法を知っている人はいますか？

Answer 1

animation-mixerコンポーネントを使用して、glTF アニメーションを使用できます。

まず、クポマンのエクスポーターでモデルをエクスポートする必要があります。Khronos グループ 1 を使用しましたが、複数のアニメーションを含むモデルのエクスポートに問題があります。

モデルをエクスポートしたら、aframe-extrasを含めるだけで、アニメーション ローダーを使用できるようになります。

次に、次のように使用できます。

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

---

任意のイベントでアニメーションを開始する場合は、コンポーネントを作成するだけで、次のように設定されますanimation-mixer:

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

Don McCurdys のガイドもぜひご覧ください。