THREE.js Ray Intersection with a page offset

Tuesday, November 26, 2013 Posted by Josh Staples
One consideration you'll have to make when projecting rays, clicks, swipes or otherwise interacting with the Canvas element is the OFFSET.   The mouse X,Y event clicks need to be adjusted by the Canvas offset.

Here is a demo.

canvasX = mouse.clientX - canvas.offset.left;
canvasY = mouse.clientY - canvas.offset.top;



If you don't take this offset into consideration, you'll be projecting a ray at the wrong location and won't intersect anything!   Very very frustrating if your code works and you're not getting good results.

Here is a gist of the code offset:
Labels: , , ,