Mouse position when not on canvas

[MitchellWT]

Hey, Im having this issue where I'm unable to get the mouse position when the mouse is over a HTML element (that is sitting on top of the canvas). This layering is achieved using CSS positioning and z-index.

I've tried a couple of different configurations to get it working but either the HTML element links don't work or the mouse position is not received.

This isn't necessarily a react-three-fiber issue but does relate to it, and I wasn't sure where to put it.

I've created a basic configuration on codesandbox, check it out.
https://codesandbox.io/s/jolly-dream-im50z?file=/src/App.js

You can see it happening when the cursor is over the nav, the box stops moving.

[drcmda]

this is an easy fix:

function App() {
  const ref = useRef()
  return (
    <div className="outerDiv" ref={ref}>
      <nav className="nav"> ...

      <Canvas className="canvas" onCreated={state => {
        state.events.connect(ref.current)
      }}>

dom events dont work like what you want, if you have a layer on top of another, the inner layer wont get hit. but you can place events on a layer that includes both.

[MitchellWT]

Sweet! Thanks for that, so this issue relates to dom events in react?

[drcmda]

Dom events in general. There's no react involved here, just contents domNode.addEventListener

[MitchellWT]

Hey, It seems theirs some strange behavior with the solution you suggested. The event listener seems to be applying to each of the child elements of the referenced element (at least that's what I think is happening).

This creates jittered movement in the example cube as the mouse position values change drastically when entering child elements. It seems to get worse with more nested elements.

I've made some modification to the code sandbox to demonstrate this behavior.

Is there a way to only apply the event listener to the parent and not the children?

[drcmda]

events.connect can put them anywhere you want. these are regular addEventListeners.