みかづきブログ・カスタム

基本的にはちょちょいのほいです。

aframe-animation-mixerを改造してARオブジェクトのアニメーションを制御可能にする 🎥

f:id:kimizuka:20201130222254j:plain

アニメーションするARオブジェクトに対してシークバーを付けてみました。

実装方針としては、以前作ったThree.jsのスクロール連動と同じで、THREE.AnimationMixerのactionのtimeを操作しているだけです。

blog.kimizuka.org

A-FrameでTHREE.AnimationMixerを使うときは、aframe-extrasのanimation-mixerを使えばタグに属性をつけるだけで、簡単にアニメーションを扱うことができるので、これを使って実装すれば良いでしょう。

github.com

が。一つだけ問題が。
aframe-extrasのanimation-mixerは属性でアニメーションが設定ができる反面、animation-mixerもactionも隠蔽されています。
この方針が安全を生んでいるのですが、actionに触れないと、細やかな制御は難しいです。

なので今回は、aframe-extrasをフォークしてactiveActionsを返却するメソッドをDOMにはやすことにしました。

JavaScript

init: function () {
 /** @type {THREE.Mesh} */
 this.model = null;
 /** @type {THREE.AnimationMixer} */
 this.mixer = null;
 /** @type {Array<THREE.AnimationAction>} */
 this.activeActions = [];

 const model = this.el.getObject3D('mesh');

  // メソッドを追加
 this.el.getActiveActions = () => {
   return this.activeActions;
 };

github.com

これで少なくとも、アクションがひとつしか設定されていないオブジェクトではうまくいきました。
複数設定されているモデルでの検証が終わったら、本家にプルリクを出してみようと思います。