AFRAME raytrace获取相交实体的参考

时间:2018-11-21 17:12:54

标签: javascript aframe

我有一个附加到vr控制器实体的raycaster组件:

 <a-entity id="righthand" 
          vive-controls="hand: right; " 
          oculus-touch-controls="hand: right;"
          controls-ui
          collider-check
       >
        <a-entity raycaster="objects: .collidable; showLine: true; far: 100; " line="color: blue; opacity: 0.5" ></a-entity>

</a-entity>

我在场景中得到了一个实体,该实体将接收光线跟踪事件:

<a-entity id='myCube' class="collidable" position="0 1.25 -6"  obj-model="obj: #cube-obj; mtl: #cube-mtl" >
       </a-entity>

在“ raycaster交叉”事件中,如何获取冲突实体的ID或任何引用? 我尝试了以下代码,但似乎没有任何数据包含

AFRAME.registerComponent('collider-check', {
  dependencies: ['raycaster'],

  init: function () {
    this.el.addEventListener('raycaster-intersected', function (evt) {

      console.log(evt.detail.el);  // not here

      console.log(evt.detail.intersection); // not here

      console.log(evt.detail);// not here

      console.log('Player hit something!');
    });
  }
});

谢谢。

---------更新-----------

@Piotr Adam Milewski的答案是正确的。要监听的事件是 raycaster-intersection ,而不是 raycaster-intersected 。这样,您可以循环遍历相交的实体的数组。

是否可以从 raycaster-intersected 获得相同的结果?如果在相交的实体上发出该事件,那么应该有可能获取其id和其他属性。我不认为每次发生相交事件时都需要遍历数组。

1 个答案:

答案 0 :(得分:2)

来自docs

  • raycaster-intersected在相交的实体上发出。它包含有关光线投射实体和相交细节的信息。
  • raycaster-intersection在光线投射实体上发射,并包含相交实体的列表。

使用raycaster-intersection时,请尝试访问evt.detail.els以获取一系列相交的实体。示例here


由于raycaster-intersected是在相交的实体上发射的,因此您可以检测光线投射器是否接触了您的目标。

target.addEventListener('raycaster-intersected', (e)=> { 
  // intersected, e.target contains the element
  // e.detail.getIntersection(e.target) contains info about the intersection
})

提琴here。拨弄getIntersection() here