是否可以使用具有三个js元素的突变观察器 - A-Frame?

时间:2017-07-21 20:27:31

标签: javascript three.js aframe webvr collider

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工作。我宁愿使用这种方法而不是刻度线,因为它将开始每帧执行它,而不是元素移动时。

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

您可以使用

var clicks = 0;
$(function () {
    $('body').on('click', '#spin', function () {
        //
        if (clicks > 0) {
            return false;
        }

        // write code here for first click

        clicks++;
    })
})

但是通过tick进行轮询/滴答是同步的,可能仍然不是一个糟糕的方法。