understanding three.js ray projection

Question

I want to understand how ray projection works. Almost where ever I see, I get a code like this:

new THREE.Vector3(mouseX, mouseY, 0.5);

I'm confused about the 0.5 in the z position. As per my understanding we are projecting on to z=1 plane (not z=0.5 plane). So shouldn't we be using it like this instead?

new THREE.Vector3(mouseX, mouseY, 1.0);

You may find my answer here: http://stackoverflow.com/a/23492823/746754 useful as it goes into ray projection and the z component. — acarlon, May 06 '14 at 11:34

WestLangley · Accepted Answer · 2013-01-08T18:39:51.263

The pattern often used is like this:

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

This is a point in Normalized Device Coordinate (NDC) Space.

The function

projector.unprojectVector( vector, camera );

is mapping from NDC space to world space.

The value 0.5 for vector.z can be set to any value between -1 and 1.

Why? Because these points are all on a line parallel to the z-axis in NDC space, and will all map to the same ray emanating from the camera in world space.

Setting z = -1 will map to a point on the near plane; z = 1 the far plane.

So the short answer is, it doesn't matter what the value of z is, as long as it is between -1 and 1. For numerical reasons, we stay away from the endpoints, and 0.5 is often used.

understanding three.js ray projection

1 Answers1