Get coordinates of a scene with a click in A-Frame

I'm trying to render a 3D model using A-Frame. This is what I've done

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>glTF Test</title>
  <meta name="description" content="OBJ Test">
  <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>.
</head>

<body>
  <a-scene>
    <!-- Assets definition -->
    <a-assets>
      <a-asset-item id="object-ref" src="/public/Scene/scene.gltf"></a-asset-item>
    </a-assets>

    <!-- Using the asset management system. -->
    <a-gltf-model src="#object-ref" position="0 25 0"></a-gltf-model>

    <!-- Camera and cursor -->
    <a-camera position="0 25 15">
      <a-cursor></a-cursor>
    </a-camera>

    <!-- Environment elements-->
    <a-sky color="#000000"></a-sky>
    <a-plane color="#1A1A1A" rotation="-90 0 0" width="500" height="500"></a-plane>
  </a-scene>
</body>

</html>

This code works and rendering is done well.

However,I'm tryng to add some event listeners that enable to get the sceene coordinates (x, y, z) of the point where I clicked with mouse.

Is there any way to do this?

Solution

If you want to detect where the meshes were clicked, then the information is within the click event detail:

entity.addEventListener("click", e => {
  console.log(e.detail.intersection.point)
})

For example:

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      const text = document.querySelector("a-text")
      // listen for clicks
      this.el.addEventListener("click", e => {
        // log the points
        //console.log(e.detail.intersection.point)
        let point = e.detail.intersection.point
        let pointString = point.x.toFixed(2) + ", " + point.y.toFixed(2) + ", " + point.z.toFixed(2);
        text.setAttribute("value", "Click at: " + pointString)
      })
    }
  })
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable">
  <a-text position="-1 2 -3" color="black"></a-text>
  <a-box class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
  <a-sphere class="clickable" position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere>
  <a-cylinder class="clickable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" foo></a-cylinder>
  <a-plane class="clickable" position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" foo></a-plane>
  <a-sky class="clickable" color="#ECECEC" foo></a-sky>
</a-scene>

In case You wanted to click anywhere and get a point, it gets complicated because of mapping 2D <x, y> -> 3D <x, y, z>.

In this case I'd create a collision mesh (like a sphere) around the camera, use it to determine the clicked points.

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      const text = document.querySelector("a-text")
      // listen for clicks
      this.el.addEventListener("click", e => {
        // log the points
        //console.log(e.detail.intersection.point)
        let point = e.detail.intersection.point
        let pointString = point.x.toFixed(2) + ", " + point.y.toFixed(2) + ", " + point.z.toFixed(2);
        text.setAttribute("value", "Click at: " + pointString)
      })
    }
  })
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable">
  <a-text position="-1 2 -3" color="black"></a-text>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-camera>
    <a-sphere class="clickable" material="side: back" visible="false" foo></a-sphere>
  </a-camera>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>