Aframe, как получить пересекающиеся элементы из события raycaster-intersection

У меня есть прослушиватель событий raycaster-пересечения, прикрепленный к моему правому лазерному контроллеру, например:

<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>

Когда raycaster пересекается с объектом .collidable, событие успешно генерируется, но я не могу найти никакой информации о пересеченном объекте из переменной события (e). Я действительно не хочу прикреплять события к каждому из этих объектов, потому что мне нужно 20 прослушивателей событий.

Вывод в консоль: введите описание изображения здесь

Это похоже на то, что вывод события неполный ... Документы Aframe подразумевают, что массив els должен содержать то, что я ищу, но он пуст. Также нет функции .getIntersection (). Любые идеи?


three.js raycasting aframe
person Matthew Kline    schedule 21.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Использование A-Frame 1.2.0

Событие, которое вы хотите прослушать: пересечение лучей

тогда вы можете получить данные о пересечении из: 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>

person Piotr Kolecki    schedule 19.04.2021