CODEWITHSUNDEEP
javascripthtmlthree.jsraycasting
Meir Elad
Meir Elad

Reputation: 75

Limit Three.js' Raycaster to a specific part of the HTML. Avoid offsets

I am using Three.js Raycaster for object picking. My HTML is made of two main parts - Navigation Bar at the top (head section), and the bottom section, where my rendering takes place (body section).

My problem is that with this "constellation", I get an annoying offset for the Raycaster, about the size of the navigation bar height. So I thought it was the problem. When I tried taking out the navigation bar - I did get good results with no offset.

Obviously I want this code to run on multiple devices (may be strict to a specific browser, but not device), so "counting the pixels by hand" is no option.

I've tried putting the render part inside an <iframe>, it reduced the offset but still - it is there (any one knows why?). I've thought on retrieving navigation bar's height and taking it into account when raycasting, but it seems to me like a patch. I rather have it the generic, robust way.

I've also tried frameborder="0" scrolling="no" in my <iframe> settings, didn't help.

I am new to HTML/js/Three.js, so the answer might be simple, I take no offence.

Upvotes: 0

Views: 239

Answers (1)

Meir Elad
Meir Elad

Reputation: 75

Found it!

Thanks to this jsfiddle, lines [58-59] says that the mouse coordinates take the following values:

mouse.x=((event.clientX - renderer.domElement.offsetLeft)/renderer.domElement.width )*2-1;
mouse.y= -((event.clientY - renderer.domElement.offsetTop)/renderer.domElement.height)*2+1;

And as you can see - the renderer holds the offsets in its DOM meta data. Apparently...

Feel free to comment.

Upvotes: 1

Related Questions