JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

<script>
  AFRAME.registerComponent("foo", {
    init: function() {
     this.el.addEventListener("mousedown", (e) => {
        console.log("aframe cursor clicked")
        console.log(e)
      })
    }
  })
  var whichButton = function(e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
      btnCode = e.button;

      if (btnCode === 0) {
        console.log('Left button clicked.');
      }
    }
  }

</script>

<body onmouseup="whichButton(event);">
  <a-scene cursor="rayOrigin: mouse" >
    <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-sky color="#ECECEC"></a-sky>
    <a-camera position="0 1.6 0" >
      <a-cursor foo></a-cursor>
    </a-camera>
  </a-scene>
</body>