Get a click event of a a-frame component

[pedrohmietlicki]

Hi, I want handle click event of dialog component like this
and I try add EventListener('click',function) but don't worked.

[robinkwilson]

This unfortunately doesn't exist in the core product yet. We have an epic open for extensibility where interactive components are mentioned: #1976

Definitely something we want to see in the future. There's a few folks that have deployed a custom client to get a click event, but it would require custom code.

[robinkwilson]

Here's another issue to follow: #2635

[conath]

I found this discussion while looking to make a custom element clickable. I ended up with the following proof-of-concept A-Frame component (based on the Spoke Rotating Cube example):

AFRAME.registerComponent("rotate", {
  schema: {
    speed: { type: "number", default: 10 }
  },

  // test click
  init() {
    this.el.setAttribute("class", "interactable"); // This makes the object targetable by the cursor-targetting-system
    this.el.setAttribute("is-remote-hover-target", ""); // Required otherwise no interaction event (tested with mouse cursor)
    this.el.setAttribute("tags", { singleActionButton: true }); // Crucial
    this.onClick = () => {
      this.data.speed = this.data.speed > 300 ? 200 : 400;
    };
  },

  play() {
    this.el.object3D.addEventListener("interact", this.onClick);
  },

  pause() {
    this.el.object3D.removeEventListener("interact", this.onClick);
  },

  // rotating cube example
  tick(_time, dt) {
    const obj = this.el.object3D;
    obj.rotation.y += (dt / 1000) * THREE.Math.degToRad(this.data.speed);
    obj.matrixNeedsUpdate = true;
  }
});

[nhatdn]

i tried it but onClick function didn't work