Getting state.mouse vector as [0, 0] no matter what

[afzalsayed96]

I'm trying to do something similar to:

  useFrame(({ clock, mouse }) => {
    group.current.rotation.y = lerp(
      group.current.rotation.y,
      mouse.x * (Math.PI / 5),
      0.005
    );
  });

But mouse.x always has the value 0 no matter what.

I would create a codesandbox but I cannot reproduce the behaviour out of my application (Next.js). What am I missing?

[drcmda]

Most likely css, something in front of the canvas swallows events.

[afzalsayed96]

Thanks very much

[Jeffmagma]

Is there a way to fix this while keeping something (like another canvas, that also uses the mouse position) in front of the canvas?

[drcmda]

Yes, there’s a eventSource prop on the canvas, just give it the parents ref or getElementById#root directly like in index.js

[Jeffmagma]

Oh thanks! That seems to mostly work, but now the elements that are above it report a different pointer value (that's very close to -1) instead of just getting passed through..

pointer-events: none technically works but I need click and (preferably) text highlight events on those components and I don't know how to keep only those events and leave let the rest pass through. Is there an easy way of solving this?

[drcmda]

yes, that's also normal css, fiber uses event.offsetX/Y. there's another property: eventPrefix="client" that will fix the behaviour you noticed.