a-scene cursor breaks raycaster

Question

I am trying to setup having fuse to trigger hover animations, whilst still having the ability to click/tap on items in the environment.

Adding <a-cursor position="0 0 -0.25"></a-cursor> as a child of my camera gives the ring cursor on-screen and allows the hover mouseenter/mouseleave eventListeners to fire as expected.

I then add cursor="rayOrigin:mouse;" to a-scene, so that I'm able to click on objects in the scene, but this breaks the hover animations.

For the hover animations I have a plane which is invisible but in front of the animating object that has the mouseenter/mouseleave eventListeners. However, when the cursor has both the plane and object behind in the raycast mouseleave is called. This doesn't happen if cursor="rayOrigin:mouse;"is ommitted.

Glitch here --> https://glitch.com/edit/#!/join/49af29f1-557a-4976-bc2b-f89fce5e3ad6

Answer 1

The <a-cursor> interferes with the scene's cursor

<a-scene cursor="...">
  <a-camera>
    <a-cursor>
    </a-cursor>

because the raycaster created by <a-cursor> emits events (upon intersection, and clearance) which bubble up and gets captured by the <a-scene> s cursor. Exactly by these two listeners .

To prevent them from interfering, you can get rid of the parent-child relation between the two:

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

Check it out in this fiddle

---

Another way would be dynamically adding / removing one of the cursors, so that only the 'intended' one is working at a time.