Search code examples
aframemouseenter

How does the current version of Aframe handle "mouse" events?


Aframe seems to have changed the way it handles mouse events without changing the documentation. Can you help me trigger mouseenter and mouseleave events?

My code is here, running in the glitch framework: https://glitch.com/edit/#!/aframe-cursor-stuff?path=index.html:1:0

(Click "show live" (top left) to run it in a new tab, click "remix to edit" (top right) to make changes to the code)

THE SCENE A circular cursor appears, with a box. If you click and drag the screen you can move the cursor over the box. If you then click, the box will animate in a y axis spin

But just moving the cursor over the box should scale the box up - and moving the cursor away from the box should scale the box back down - using "mouseenter" and "mouseleave"

This, in fact, works if you substitute the Aframe src to an earlier version (0.2.0) which I have commented out in my code - if you want to try it.

The documentation for the current release (0.8.0) still seems to support mouseenter events: https://aframe.io/docs/0.8.0/components/cursor.html and specifies:

"mouseenter: Emitted on both cursor and intersected entity (if any) when cursor intersects with an entity"

For the record, Aframe version 0.8.2 reacts like 0.8.0

Can you tell me what's what?


Solution

  • <a-event> is deprecated since 0.4.0. Use the event-set-component:

    <a-box color="#0000FF" 
           width="1" height="1" depth="1"
           position="0 0 -5"
           rotation="45 45 45"
           scale="1 1 1"
           event-set__mouseenter="scale: 2 2 2"
           event-set__mouseleave="scale: 1 1 1">
             <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>  
    </a-box>
    

    Demo: https://glitch.com/edit/#!/rainy-camera-1?path=index.html:14:7