Aframe 如何从 raycaster-intersection 事件中获取相交元素答案

【问题标题】：Aframe how to get intersected elements from raycaster-intersection eventAframe 如何从 raycaster-intersection 事件中获取相交元素
【发布时间】：2020-09-08 15:29:06
【问题描述】：

我有一个 raycaster-intersection 事件侦听器连接到我的右侧激光控制器，如下所示：

<a-entity id="rightController" laser-controls="hand: right" raycaster="objects: .collidable; far: 20"></a-entity>

...

rightController.addEventListener("raycaster-intersection", function(e) {
   console.log(e);
});

可碰撞对象示例：

<a-sphere class="collidable" color="yellow" radius="5" position="31.617 7.159 -10.258" scale="0.1 0.1 0.1"></a-sphere>

当光线投射器与 .collidable 对象相交时，事件已成功发出，但我无法从事件变量 (e) 中找到有关相交对象的任何信息。我真的不想将事件附加到这些对象中的每一个，因为我需要 20 个事件侦听器。

控制台输出：

就像事件输出不完整...Aframe 文档暗示“els”数组应该包含我要查找的内容，但它是空的。也没有 .getIntersection() 函数。有什么想法吗？

【问题讨论】：

标签： three.js aframe raycasting

【解决方案1】：

使用 A-Frame 1.2.0

您要收听的事件是：raycaster-intersected

然后你可以从 evt.detail.el.components.raycaster 获取相交数据，它也有 getIntersection(el) 方法

以下示例。

<!DOCTYPE HTML>

<head>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>

<body>
  <script>
  AFRAME.registerComponent('cursor-listener', {
    init: function () {
      this.el.addEventListener('raycaster-intersected', evt => {
        this.raycaster = evt.detail.el;
      });
      this.el.addEventListener('raycaster-intersected-cleared', evt => {
        this.raycaster = null;
      });
    },
    tick: function () {
        if (!this.raycaster) { return; }  // Not intersecting.
        let intersection = this.raycaster.components.raycaster.getIntersection(this.el);
        if (!intersection) { return; } // Not intersecting
        // intersecting
        console.log(intersection);
    }
  });
  </script>
  <a-scene id="scene">
    <a-entity cursor="rayOrigin: mouse" raycaster="objects: .cursor-listener"></a-entity>
    
    <a-plane
        position="0 1.6 -1"
        height="2"
        width="1.5"
        color="red"
        class="cursor-listener"
        cursor-listener
        id="element"
      ></a-plane>
  </a-scene>
</body>

【讨论】：