Обработчик щелчков не работает с простейшими объектами gerarty

Question

Я добавил обработчик кликов примитивной геометрии из рамки, как показано ниже:

<a-scene>
  <a-sphere id="ball" cursor-listener material="color: red" position="-3 3 -5" onclick="showplane('#box1')" >
  </a-sphere>
</a-scene>
  

Я хочу анимировать геометрию плоскости при нажатии на сферу, и когда плоскость становится видимой для пользователя, мне нужно прикрепить обработчик щелчка для плоскости.

JS скрипка: https://jsfiddle.net/bhupi1011/9ptLqa32/

Обработчики кликов не работают ни с одной из геометрий.

Благодарю.

Answer 1

Вы должны добавить курсор на сцену. Для щелчка мышью вы можете сделать:

<a-scene cursor="rayOrigin: mouse">

Используйте компонент для обработки событий кликов:

AFRAME.registerComponent('select', {
  init: function () {
    var originalColor = this.el.getAttribute('material').color;
    var self = this;
    this.el.sceneEl.addEventListener('click', function (evt) {
      var color;
      if (evt.detail.intersectedEl === undefined) { return; }
      var color = evt.detail.intersectedEl === self.el ? 'green' : originalColor;
      self.el.setAttribute('color', color);
    }, false);
  }
});

Демо: https://jungle-plate.glitch.me/

Код: https://glitch.com/edit/#!/jungle-plate?path=select.js:12:3