Game Development Reference
In-Depth Information
In the preceding code, first we get the object of the canvas element and store it in
the
parent
variable. The
offsetTop
and
offsetLeft
variables return the top and
left values with respect to their parent. We then add the values to the
top
and
left
variables, and then we retrieve their parent using the
offsetParent
variable. We
perform the preceding process until the
parent
variable becomes null or the
parent
variable is not the
BODY
tag. Hence, the
top
and
left
variables contain the sum of
the
offsetTop
and
offsetLeft
variables of the canvas' parents. Then, we counter
for the page scroll height (
left += window.pageXOffset
and
top -= window.
pageYOffset
).
We subtract the canvas' location (
x = e.clientX - left;
) with respect to the
client's view from the mouse click coordinate.
We calculate the
y
value after subtracting it from the height
of the canvas (
gl.viewportHeight
). We do so because
the WebGL coordinate system originates in the bottom left,
while the coordinate we calculated previously was taken
from the top right of the screen.
We then pass the computed click coordinates to our
rayCaster.pickedObject
function, where we convert these values to
Normalized Device Coordinates
(
NDC
).
We calculate the click coordinates as follows:
var x1 = ( x / this.screen_width )*2 - 1;
var y1 = ( y / this.screen_height)*2 - 1;
The following diagram shows how we represent our 3D scene on a 2D canvas. It
shows that the origin of the world (0,0,0) is marked as the center (0,0) of the screen:
(-1, 1)
(1, 1)
.
(0, 0)
(-1, -1)
(1, -1)
