Binding mouse events to a-frame objects

Question

I am using aframe and AR.js for an Augmented Reality project. I am trying to attach mouse events to the 3D objects.According to the ar.js docs You would have to use a cursor for this.

What I'm trying to do is , make the mouse as the cursor, and then attach the mouse events to it, using the aframe-mouse-cursor-component as shown here.

It works till an extent. I am able to drag the 3D assets across the screen using the mouse, but none of the mouse events work.

This is the HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script src="js/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-mouse-cursor-component.min.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam' cursor="rayOrigin: mouse">
    <a-assets>
          <!--Used <a-asset-item> here  -->
    </a-assets>
    <a-marker type='pattern' url='markers/mainmarker.patt'>
        <a-entity right gltf-model="#arrow" scale="1.5 1.5 1.5" ></a-entity>
        <!-- other <a-entity> entities  -->
    </a-marker>
    <a-entity camera look-controls mouse-cursor>
        <!-- <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.049; radiusOuter: 0.05"
            material="color: red; shader: flat">
        </a-entity> I have tried the code with and without this part -->
    </a-entity>
</a-scene>
</body>
</html>

And this is the JS:

AFRAME.registerComponent('right', {
  init: function () {
    this.el.addEventListener('mousedown', function (evt) {
        console.log("THIS GOT CLICKED");
        //other stuff to do
    });
  }
});

I have tried a lot of events - mousedown,mouseup,click etc. But none work.

How do I bind these events to the mouse?

poch3ng · Accepted Answer · 2020-09-12 06:36:04Z

2

Aframe has mouse mode in cursor component

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

Here is link

answered Sep 12, 2020 at 6:36

poch3ng

292 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RishiC Over a year ago

I tried this one too, it does make the mouse look different near the 3D object , but the mousedown still isn't working

Collectives™ on Stack Overflow

Binding mouse events to a-frame objects

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related