Is it possible to use Mutation Observer with a Three js element - A-Frame?

Question

export class ColliderComponent {

  constructor() {
    this.observer = this.mutationObserver();      
    this.aframe(); 
  }


  //Registers the AFRAME component.
  aframe(){
    const __this = this; 
    AFRAME.registerComponent('collider', {
      schema: {

      },
      init: function () {
          console.log("The element to be observed is:",this.el);

          __this.observer.observe(this.el, {characterData:true, subtree:true, attributes: true, attributeFilter: ['position'], childList : true}); 
      },

      tick : function(){
        console.log(this.el.getObject3D('mesh').position);
      }
    });

  }

  private tick(){

  }

  private mutationObserver() : MutationObserver{
    return new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        console.log("Changed position");
      });
    });
  }

}

I'm working on creating a simple collider. I'm going to track the elements that have the "collider" component and check if they're intersecting using intersectsBox. Unfortunately, I can't seem to make the MutationObserver to work. I'd rather use this approach instead of the tick, because it will start executing it per frame, instead when the elements move.

Any suggestions?

Answer 1

You can use

el.addEventListener('componentchanged', function (evt) {
  if (evt.detail.name === 'position') {

  }
});

But polling/ticking via tick is synchronous and probably still not a bad way to go.