The mouse position in 3D on a plane

Questions
1

Hello, I’m making a system to move on a click floor with TweenJS.

So when I go to click on my floor, I move to the point of the click.

I also have a circle that follows my mouse cursor.

The problem I have is that when I move my camera, but not my mouse, the position of my circle is not updated (logical since it’s an onPointerMove event).

And i don’t know how to update the position of my circle when my move is finished, without moving my mouse.

Here is a video of my problem :

There is a sandbox : Movement - CodeSandbox

If you have an idea of how to solve this problem, I would love to hear it, thank you!

2

pointer events in fiber are modelled after the dom. if you move a link or a div underneath your cursor without user interactipon it won’t trigger onPointerOver. same in threejs. this is done to avoid unnecessary computing and raycasting. but you can force it.

this requires fiber@8.11.0

function RaycastWhenCameraMoves() {
  const matrix = new THREE.Matrix4()
  useFrame((state) => {   
    if (!matrix.equals(state.camera.matrixWorld)) {
      state.events.update()
      matrix.copy(state.camera.matrixWorld)
    }
  })
}

drop this into your canvas and your example will work. might be a useful component for drei … :thinking:

3

It works perfectly as I wanted, thank you very much! Sure it would be cool to have it in as a
drei component aha