2017-07-21 59 views
0
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"); 
     }); 
    }); 
    } 

} 

我正在创建一个简单的碰撞器。我将跟踪具有“collider”组件的元素,并使用intersectsBox来检查它们是否相交。不幸的是,我似乎无法让MutationObserver工作。我宁愿使用这种方法而不是滴答声,因为它会在每帧中开始执行,而不是在元素移动时执行。是否可以使用具有三个js元素的突变观察者 - A-Frame?

有什么建议吗?

+0

我也试着用getObject3D('mesh')检查位置。但是,当我使用A-Frame的动画组件时,这不会触发任何事情。 –

回答

1

您可以使用

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

    } 
}); 

但轮询/剔通过滴答作响的是同步的,可能仍然不是一个坏的路要走。

+0

ooof。传说本身回答我。我会给它一个镜头,然后回复。谢谢! –

+0

传说自己* –

+0

太棒了。一切都很好。我将使用该组件,一旦完成,我将在Github中发布它。 –

相关问题