export class ColliderComponent {
constructor() {
this.observer = this.createMutationObserver();
this.registerAframeComponent();
}
//Registers the AFRAME component.
registerAframeComponent(){
const self = this;
AFRAME.registerComponent('collider', {
schema: {
},
init: function () {
console.log("The element to be observed is:",this.el);
self.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 createMutationObserver() : MutationObserver{
return new MutationObserver(mutations => {
mutations.forEach(mutation => {
console.log("Changed position");
});
});
}
}
I'm currently in the process of developing a basic collider functionality. My objective is to keep track of elements equipped with the "collider" component and check for any intersections by employing intersectsBox. However, I've encountered difficulties in getting the MutationObserver to function as intended. I prefer this method over using tick because it will run continuously per frame, regardless of whether the elements are moving or not.
Any insights or suggestions would be greatly appreciated!