Controls target update with mouse

Questions
1

I would like to update the controls target to the mouse ‘position’, so the click position becomes the center of orbit. My current code returns a wrong position ( tried from this example
Note that the canvas is offset in the page.

2

If canvas is not fullscreen, make sure to correctly calculate the click locations - as an example. Specifically this lines:

const onPointerMove = (event) => {
  const rendererSize = renderer.domElement.getBoundingClientRect();
  
  const relativeX = event.clientX - rendererSize.x;
  const relativeY = event.clientY - rendererSize.y;

  cursor.x = (relativeX / rendererSize.width) * 2 - 1;
  cursor.y = -(relativeY / rendererSize.height) * 2 + 1;

  raycaster.setFromCamera(cursor, camera);
};
1 Like
3

Uhm? Isn’t the controls.target a 3D position, whereas a mouse click is only 2D?

1 Like
4

i dont intersect any object, can i still use the raycaster?

5

The 2D clicked position represents an infinite amount of 3D positions which would all be projected onto the same 2D screen coordinates. Without any additional information you can’t possibly discern, which point on that ray you mean to use as target.

In other words: projecting a 3D point onto a 2D screen is an unambiguous transformation, involving a loss of information. The reverse, deriving a 3D position from a 2D one is infinitely ambiguous.

6

Even though scientifically incorrect, one arbitrarily decides for depth, it is common practice. …Not sure if you were asking?

7

Yes, I’ve observed that, too: the number of people who think they can arbitrarily choose which part of science to observe, and which to ignore, is increasing.

All I can say to them is: Good luck with that!

8

thank you.

9

You can do that with math in three, but if you’re good with quick-dirty-and-way-more-intuitive - you can just add a plane to the camera (be sure to also then .add(camera) to the scene, otherwise the plane won’t be added properly.) Then just set that plane at a nice local z-axis offset from the camera and intersect only against that plane mesh - it’ll effectively cast 2D cursor into 3D position.

1 Like
10

i resolved to use the objects in the scene, a more classic approach. I
wished i had the 3D math though; but i couldnt get it to work.