2017-07-21 5 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"); 
     }); 
    }); 
    } 

} 

私はシンプルなコライダーの作成に取り組んでいます。私は、 "コライダー"コンポーネントを持っている要素を追跡し、それらが交差しているかどうかをintersectsBoxで調べるつもりです。残念ながら、私はMutationObserverを機能させることができません。むしろ、要素が動いたときにフレームごとに実行を開始するので、私はむしろダニの代わりにこのアプローチを使用したいと思います。Three js element-A-FrameでMutation Observerを使用することはできますか?

提案がありますか?

+0

また、getObject3D( 'mesh')の位置を調べてみました。しかし、それは私がA-Frameのアニメーションコンポーネントを使用しているときには何もトリガしません。 –

答えて

1

あなたは

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

    } 
}); 

を使用することができます。しかし、ポーリング/ダニを経由してカチカチして行くには悪い方法の同期で、おそらくまだありません。

+0

Ooof。伝説そのものが私に答える。私はそれを打ち、返信します。おかげで! –

+0

伝説の彼自身* –

+0

素晴らしい。すべてが本当にうまくいっています。私はコンポーネントを使って作業し、完成したらGithubに投稿します。 –

関連する問題