捕获事件 'raycaster-intersected' AFRAME

Question

我需要在事件raycaster-intersected 每次发生时捕获它。

我需要到检测到的第一个实体的距离来检查碰撞，但该事件仅在光线投射器第一次击中实体时触发。

如果光线投射器仍然接触到实体，它不会触发事件。

我有下一个代码：

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);
    });
  }
});

Answer 1

这样的自定义组件怎么样：
- raycaster-intersected 事件触发 - 你存储光线投射器
- 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 中查看。