0

I am trying to convert from mouse position to map position in react-threejs. Using hook useThree I can get the mouse position where x,y in [-1,1]. However unproject(camera) returns the values in [-screen pixel/2, -screen pixel/2] instead of the world position.

const { mouse } = useThree();
...
var vector = new THREE.Vector3();
vector.set(mouse.x, mouse.y, 1);
vector.unproject(camera); // -1,1 => -screen width/2,screen width/2

My canvas:

<Canvas
        camera={{
          position: [0, 0, 100],
          up: [0, 0, 1],
        }}
      >
        <OrbitControls ref={controlsRef} />
        <ambientLight />
        <Map />
      </Canvas>

Any idea please?

beewest
  • 4,486
  • 7
  • 36
  • 63
  • Does this answer your question? [Mouse / Canvas X, Y to Three.js World X, Y, Z](https://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z) – jtbandes Jul 08 '22 at 00:05

2 Answers2

2

I am a little unsure if I am understanding you fully, but it seems like you are trying to access the 3D cartesian coordinate point on an object in the renderer based on where your mouse position is? If this is the case this is a ray casting problem.

Luckily you are using react-three-fiber and it comes with some handy raycasting solutions. If your map is just a planeGeometry you can take advantage of three-fiber events like so:

    <mesh onClick((e) => {
        console.log(e.point) // this is the coordinates for the event, eg. mouse click
    })

meshes can respond to all the same js events you are used to. Very well builts library

investInSoup
  • 185
  • 8
0

Found the answer here:

Mouse / Canvas X, Y to Three.js World X, Y, Z

var vector = new THREE.Vector3();
var pos = new THREE.Vector3();
vector.set(mouse.x, mouse.y, 1);
vector.unproject(camera); // -1,1 => -screen width/2,screen width/2
vector.sub(camera.position).normalize();
var distance = -camera.position.z / vector.z;
pos.copy(camera.position).add(vector.multiplyScalar(distance));
beewest
  • 4,486
  • 7
  • 36
  • 63