Why are mouseenter and mouseleave startEvents not triggering correctly?

20 Views Asked by Liam Owen At 06 March 2024 at 16:12

I want this a-box to turn red when I look at it, and turn white when I look away. However, I'm getting this weird flickery behavior whenever the cursor is overlapping with the cube. Here's the code for the object:

<a-box position="0.5 0.5 -3" rotation="0 45 0" color="white"
    animation__mouseenter="
      property: color;
      to: #ff0000;
      dur: 1;
      startEvents: mouseenter;
    "
    animation__mouseleave="
      property: color;
      to: #ffffff;
      dur: 1;
      startEvents: mouseleave;
    ">
</a-box>

Unfortunately, Stack Overflow won't let me insert a gif demonstrating the problem as it's too large. I'm on Aframe 1.5.0, so maybe you'll be able to reproduce the problem.

I tried changing the animation component to animation__mouseenter and using mouseenter as the startEvents. I was expecting the box to change its color to red the frame the cursor looks at it, stay red, and turn back to white the frame the cursor looks away.

Original Q&A

There are 1 best solutions below

Pietro On 28 March 2024 at 10:58

I tried using your code within a scene and it works fine. My suspect is that there is something wrong in some other parts of the code, probably in regards to the cursor/raycaster. Anyway, this is a working sample:

<html>
  <head>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  </head>

  <body>
    <a-scene>
      <!-- <a-entity camera look-controls position="0 1.6 0"> <a-cursor></a-cursor>
            </a-entity> -->
      <a-entity camera look-controls position="0 1.6 0">
        <a-entity
          cursor
          position="0 0 -1"
          geometry="primitive: sphere; radius: 0.005"
          material="color: #000000; shader: flat; opacity: 0.5"
        >
        </a-entity>
      </a-entity>
      <a-box
        position="0.5 0.5 -3"
        rotation="0 45 0"
        color="white"
        animation__mouseenter="
      property: color;
      to: #ff0000;
      dur: 1;
      startEvents: mouseenter;
    "
        animation__mouseleave="
      property: color;
      to: #ffffff;
      dur: 1;
      startEvents: mouseleave;
    "
      >
      </a-box>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Why are mouseenter and mouseleave startEvents not triggering correctly?

There are 1 best solutions below

Related Questions in HTML

Related Questions in ANIMATION

Related Questions in AFRAME

Trending Questions

Popular # Hahtags

Popular Questions