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

f:id:kimizuka:20201130222254j:plain

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

aframe-animation-mixerをほんのり改造して、ARで表示したオブジェクトのアニメーションをシークできるようにしてみました。
🎥 https://t.co/oFezei9dJu pic.twitter.com/GqaZrlg4IX
— 君塚史高 (@ki_230) 2021年1月20日

実装方針としては、以前作った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;
 };