How to make animation trigger in mouseenter in AFrame?

Question

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>

<body>
    <a-scene>

        <a-entity class="sign" id="sign" position="2.5 1 -3.5" animation__mouseenter="property:rotation; to:0 -390 0; easing:linear; dur:2000; startEvents: mouseenter" rotation="0 -30 0" text="width: 4; align: center; color: black; value: Make the sign board rotate 360">
            <a-box color="#FFFF00" position="0 0 -0.05" scale="1.8 0.6 0.1"> </a-box>
            <a-box color="#FFFF00" position="0 -0.7 -0.05" scale="0.1 1 0.1"> </a-box>
        </a-entity>

        <a-camera position="0 0.2 1.3"><a-cursor objects=".duck1 .duck2 sign" ></a-cursor></a-camera>


    </a-scene>
</body>
</html>

I am trying to use add animation for Aframe 1.2.0

 <a-entity class="sign" id="sign" position="2.5 1 -3.5" animation__mouseenter="property:rotation; to:0 -390 0; easing:linear; dur:2000; startEvents: mouseenter" rotation="0 -30 0" text="width: 4; align: center; color: black; value: Make the boxes meet">
            <a-box color="#FFFF00" position="0 0 -0.05" scale="1.8 0.6 0.1"> </a-box>
            <a-box color="#FFFF00" position="0 -0.7 -0.05" scale="0.1 1 0.1"> </a-box>
        </a-entity>

But the event is not working properly. Am I doing it the wrong way?

Lastly, while implementing the above code I was getting a warning of raycaster. I'm not using it when why it is showing up. I am having the same issue in real project as well. How to fix it?

THE WARNING

%ccomponents:raycaster:warn %c[raycaster] For performance, please define raycaster.objects when using raycaster or cursor components to whitelist which entities to intersect with. e.g., raycaster="objects: [data-raycastable]".%c  color: orange color: inherit color: orange

Raycaster warning is explained here: stackoverflow.com/questions/70031729/… — Diarmid Mackenzie
– Diarmid Mackenzie, Commented Nov 19, 2021 at 19:16
Curosr uses raycater implicitly, so if you are using cursor, you are using raycaster, even if you don't know you are...! — Diarmid Mackenzie
– Diarmid Mackenzie, Commented Nov 19, 2021 at 19:35

Diarmid Mackenzie · Accepted Answer · 2021-11-19 22:01:51Z

For a gaze-based cursor at the center of the screen, what you have is almost right.

The entry in objects: needs to match a selector, so .sign for the class or #sign for the id.

However, the entity with class "sign" does not have any geometry, so the raycaster will never hit it. One solution is to give the children the same class of "sign" - then the raycaster will hit them, and the event will bubble up to the parent entity where it can trigger the animation.

Full code:

        <a-entity class="sign" id="sign" position="2.5 1 -3.5"
              animation__mouseenter="property:rotation; to:0 -390 0; easing:linear; dur:2000; startEvents: mouseenter"
              rotation="0 -30 0" text="width: 4; align: center; color: black; value: Make the sign board rotate 360">                  
        <a-box class="sign" color="#FFFF00" position="0 0 -0.05" scale="1.8 0.6 0.1"> </a-box>
        <a-box class="sign" color="#FFFF00" position="0 -0.7 -0.05" scale="0.1 1 0.1"> </a-box>
    </a-entity>

    <a-camera position="0 0.2 1.3">                
      <a-cursor "objects: .sign">
      </a-cursor>
    </a-camera>

Another solution would be to give the parent entity a geometry (e.g. an invisible plane) that the raycaster can hit

Working glitch showing the 1st solution here:

https://glitch.com/edit/#!/raycast-sign-animation?path=index.html%3A24%3A7

One thing I noticed is that the animation you specified will only run once. If you refresh the page it will run again, but only once.

The reason for this is that after the animation has run the first time, the entity is rotated to the target "to" rotation of "0 -390 0".

If you want the animation to run multiple times, add a "from" rotation of "0 -30 0" and it should refresh each time. I have updated the glitch to show that too.

Thanks for your solution. But I want to make mouse(circular disk in center of screen) visible. And I only want to move it when the disk is over it.
OK - then go back to using cursor as you were. The problems would were hitting were likely a combination of: - not having any geometry on the parent entity - not having a raycastable class on the child entities - the fact that the rotation didn't reset so would only trigger once per browser refresh.

Collectives™ on Stack Overflow

How to make animation trigger in mouseenter in AFrame?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related