What is Three.js raycaster exactly doing?

Question

I have seen example codes for collision detection using Three.js which all have a piece of code as:

var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );

my question is, what is event.clientX / window.innerWidth ) * 2 - 1 & event.clientY / window.innerHeight ) * 2 exactly? why these values?

I need to write a code for orthographic camera hit detection, but I first need to realize what is happening in perspective camera case.

Answer 1

( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1

maps a pixel coordinate from Screen Space to a point in Normalized Device Coordinate ( NDC ) Space.

projector.unprojectVector( vector, camera );

maps a point from NDC Space to a point in World space.

Raycaster then creates a ray from the camera position through that world point.

If you need help understanding these concepts, see the references in this answer.

Also, for an orthographic camera, you need to use a slightly different approach. See this answer for more info.

three.js r.66