Project a 2D screen point to 3D world point


I saw the solution here and I have problems to understand the solution.
Specifically I don’t understand,

  • why setting arbitrary z value is ok. I read about Normalized Device Coordinate (NDC) in the Internet but I couldn’t find an answer.
  • the subtraction of the camera position from the ray direction followed by adding the result to the camera position.

Can someone please add a vector diagram that explains what these operations do?


I found a very useful illustration of the operations here

As I understand,

after the line:
vec.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
vec is the position of a 3D point (pointA) in space along the ray in Normalized Device Coordinates

after the line:
vec.unproject( camera );
vec is the position of pointA in 3D space in world coordinates

after the line:
vec.sub( camera.position ).normalize();
vec is the normalized ray direction from the camera

after the line:
var distance = ( targetZ - camera.position.z ) / vec.z;
distance is the distance/scale by which to travel along the ray, until reaching a point on the ray which lies in plane z=targetZ

after the line:
pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
pos is the position of the 3D point (pointB) which lies on the ray and is at z==targetZ