javascript - 是否可以将 Mutation Observer 与三个 js 元素 - A 框架一起使用?

标签 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");
      });
    });
  }

}

我正在努力创建一个简单的对撞机。我将跟踪具有“collider”组件的元素,并使用 intersectsBox 检查它们是否相交。不幸的是,我似乎无法使 MutationObserver 工作。我宁愿使用这种方法而不是刻度,因为它将开始每帧执行它,而不是当元素移动时。

有什么建议吗?

最佳答案

你可以使用

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

  }
});

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

关于javascript - 是否可以将 Mutation Observer 与三个 js 元素 - A 框架一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45246216/

相关文章:

javascript - 具有单个绘制调用的多个纹理

javascript - 如何在 JXBrowser 中调用 javascript 函数

javascript - 如何检索以 JSON 格式接收的数组数据

javascript - Three.js补间值没有到达目标,而是完成但保持初始值

three.js - 三个 CSG 的 3D bool 运算

three.js - 如何检测 AR.js 中何时找到标记

javascript - 如何在 Streoids.js 转换后重新加载页面?

javascript - 如何在加载 HTML 页面时清除缓存内存?

javascript - Three.js tween camera.lookat

javascript - 如何在 javascript 中获取 gltf 模型的屏幕截图?