A-FrameでARマーカーが回転したことを検知する 🔁

ARマーカーの回転検知。 pic.twitter.com/W6ukDJorN8
— 君塚史高 (@ki_230) 2020年11月19日

以前は、マーカーのpositionを取得する方法を使ったデモを作りましたが、今回はマーカーの回転を検知してみます。

blog.kimizuka.org

JavaScript

let timer;
let lastPos;
let lastRot;

AFRAME.registerComponent('marker', {
  init: function () {
    const marker = this.el;
    const text = document.querySelector('a-text');

    marker.addEventListener('markerFound', function () {
      clearInterval(timer);
      timer = setInterval(() => {
        const rot = marker.getAttribute('rotation');

        if (lastPos) {
          const diffRotX = rot.x - lastRot.x;
          const diffRotY = rot.y - lastRot.y;
          const diffRotZ = rot.z - lastRot.z;

          const diffRot = Math.abs(diffRotX) + Math.abs(diffRotY) + Math.abs(diffRotZ);

          if (diffRot > 3) {
            text.setAttribute('color', 'green');
            text.setAttribute('value', 'ROTATE');
          } else {
            text.setAttribute('color', 'red');
            text.setAttribute('value', 'STOP');
          }
        }

        lastRot = Object.assign({}, rot);
      }, 100);
    });

    marker.addEventListener('markerLost', function () {

    });
  }
});