I’m quite new to Three.js and React to be honest and I need some help with one of my projects.

So basically, I want to have a 3D model that follows my mouse cursor (lookAt). I’ve found this code in codesandbox where it does exactly what I want but without one detail.

The object lookAt the mouse cursor, but only when it’s inside of the canvas. I would like it to follow the mouse cursor when it’s outside of the canvas too.

Here’s the code

I messed around a bit with HugginChat to find a solution and it gave a quite interesting idea but I have no idea if it would work:

“Instead of handling the mouse movement within the @react-three/fiber ecosystem, you can manage it yourself and pass the information down to the necessary components. We’ll still rely on the useMouse hook but will no longer connect the canvas to the document. Instead, we’ll calculate the normalized position ourselves based on the canvas dimensions and store it in our state. Then, simply share that state with any children that require the mouse position via context.”

It’s like creating a component that will provide the mouse pos info to my component with the canvas.

Any pro could help me with this please ????

I tried using the useMouse hook from useHooks, but no success

I expect a method so my 3D Object lookAt will work inside and outside of my canvas