A-Frame: Click event not works for objects

Question

I add an eventListener at click and a raycaster for an object, but when I click on the object nothing happens. If I open the aframe-inspector and I inspect the object without to do any changes, I’m going back to scene and I click again the object, it shows me the console.log from the eventListener. Somebody knows why and how can I fix it?

Here is my code:

AFRAME.registerComponent('dinning-options', {
  init: function () {
    console.log('Registered');
    this.el.addEventListener('click', function (evt) {
      console.log('I was clicked at: ', evt.detail.target);
    });
  }
});

<a-entity
  dinning-options
  raycaster="showLine: false; far: 100"
  obj-model="obj: #dinning-obj; mtl: #dinning-mtl;"
  id="dinning"
  position="7.430 0 -6.35"
  scale="0.003 0.003 0.003"
></a-entity>

Thank you!

Piotr Adam Milewski Piotr Adam Milewski · Accepted Answer · 2017-08-08T08:54:02

The raycaster should be set on the entity, which emits it, in this case it should be a camera with a cursor. You can do Your configuration ( raycaster whitelist, far) within the cursor component.

Try placing a basic <a-camera><a-cursor></a-cursor></a-camera>entity, and mess with its raycaster settings.

A-Frame: Click event not works for objects

1 Answers