捕获事件“与雷卡斯特相交”的AFRAME

时间:2018-08-30 16:54:50

标签: javascript events three.js aframe

每次发生时,我都需要捕获事件raycaster-intersected

我需要与检测到的第一个实体的距离来检查碰撞,但是该事件仅在raycaster第一次击中一个实体时触发。

如果raycaster仍然触摸实体,则不会触发事件。

我有下一个代码:

AFRAME.registerComponent("follow-body", {
  'schema': {
    entityId: {
      type:'string',
      default:''
    }
  },
  init: function(){
    this.pibot = document.querySelector("#" + this.data.entityId);
  },
  tick: function(){
    let pibotPos = this.pibot.object3D.position;
    let pibotRotation = this.pibot.object3D.rotation;
    let el = this.el;
    pibotPos.y += 0.2;

    el.object3D.position.set(pibotPos.x, pibotPos.y, pibotPos.z);
    el.object3D.rotation.set(pibotRotation.x, pibotRotation.y, pibotRotation.z);
    el.addEventListener('raycaster-intersection', function(evt){
      var e = new CustomEvent('intersection-detected', {detail: evt.detail});
      this.dispatchEvent(e);
    });
  }
});

1 个答案:

答案 0 :(得分:0)

如何定制这样的组件:
-raycaster-intersected事件触发-您存储raycaster
-raycaster-intersected-cleared-取消raycaster参考
-在tick上,如果存在射线投射器参考,请获取相交点并进行计算。

AFRAME.registerComponent("foo", {
  init: function() {
    this.el.addEventListener("raycaster-intersected", evt => {
      this.intersectingRaycaster = evt.detail.el.components.raycaster;
    });
    this.el.addEventListener("raycaster-intersected-cleared", () => {
      this.intersectingRaycaster = null;
    });
  },
  tick: function() {
     if (!this.intersectingRaycaster) {
        return;
     }

     const intersection = this.intersectingRaycaster.getIntersection(this.el);
     if (intersection) {
        let point = intersection.point;
        // your calculations
     }
  }
});

在此fiddle中进行检查。