0

I'm a novice to ThreeJS. I'm trying to learn how, after a mousemove event, to convert the event's mouse pixel position to ThreeJS scene position. There are several questions asking this question on SO (e.g. 1, 2, 3) and all use code like:

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

In experimenting with this, I discovered that this produces mouse position values between 0 and 1. What I want is mouse position values in the Three JS scene. How do I convert from [0, 1] to scene position values?

The answers on those pages involve complicated operations with raycasting and unprojecting cameras. Can someone either provide a simpler solution, or explain why those operations are necessary?

Rylan Schaeffer
  • 1,945
  • 2
  • 28
  • 50
  • Does this answer your question? [Three JS - Rotate arrow in 3D to track mouse](https://stackoverflow.com/questions/70918227/three-js-rotate-arrow-in-3d-to-track-mouse) – 2pha Jan 30 '22 at 22:06
  • You need to multiply the `mouse.x` and `mouse.y` normalised (i.e. 0-1) values by the size of the canvas element to get them into pixel coordinates – Enijar Jan 31 '22 at 22:21

0 Answers0