Ray Casting and Filters - WebGL Game Development - page 324

stageObject.system=this.system;
stageObject.initializePhysics(false);
stageObject.rigidBody._id=len;
this.system.addBody(stageObject.rigidBody);
}
},
The addModel function first checks whether rigidBody is already created. If it is
already created, then we simply assign it an _id parameter. The _id parameter is the
index of the stageObject in the stageObjects array. If rigidBody is not already
created, it invokes the initializePhysics function of the StageObject class and
then assigns it an ID. It then adds the object to the physics system.
Calculating the screen coordinates of a click
Getting the click coordinates on the canvas requires a little work. The property of the
mouse click events, offsetX and offsetY , gives us the coordinates relative to the
parent container. However, they are not very useful as they are not available in some
browsers such as Firefox.
We will use e.clientX / e.clientY . They are event attributes that give us the
horizontal and vertical coordinates (according to the current window) of the mouse
pointer. Hence, we need to first calculate the position of our canvas with respect to
the document, add the page scroll, and then subtract that value from the e.clientX
attribute. Open the 09-Picking-Using-Ray-Casting.html file in your editor. The
following code snippet is present in this file:
var parent=document.getElementById('canvas');
parent.onmousedown=function(e) {
var x, y, top = 0, left = 0;
while (parent && parent.tagName !== 'BODY')
{
top =top+ parent.offsetTop;
left =left+ parent.offsetLeft;
parent= parent.offsetParent;
}
left += window.pageXOffset;
top -= window.pageYOffset;
x = e.clientX - left;
y=(e.clientY - top);
y = gl.viewportHeight - y;
var rigidBody=rayCaster.pickObject(x,y,system);
...
};