Threejs issue with raycaster intersection

Question

I wrote a code to intersect some object and worked fine until I put canvas with other div in html document. Now there are no intersection on the object. In this Live example:http://www.felpone.netsons.org/web-threejs/index1.html if you select on the right top the button cross and try to move the shape you can't. You can move shape if you put your mouse a little bit at right of the shape. So the intersection is completely wrong. I tried some solutions posted on stackoverflow but doesn't work. Can anyone help me to understand please? I am desperate.

In this other live example you can see how it should work : http://www.felpone.netsons.org/web-threejs/. I tried with other solutions written on Stackoverflow but without result.

Maybe can depend by mouse coordinates:

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

Here you can see the javascript code : http://www.felpone.netsons.org/web-threejs/stereos.js

Maybe can depend by:

I noticed that there are two differents dimension for canvas as you can see in this screenshot: enter image description here

See http://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div — WestLangley, Jan 13 '15 at 15:33
Tip: Avoid instantiating a new `Raycaster` and `Vector3` every time the mouse moves. Create one of each and reuse them. — WestLangley, Jan 13 '15 at 15:36
the tag you circled in your screen shot above doesn't matter. What matters are the actual number (the top number you circled). And if the user resizes the browser, that top number may change. You need to query the containing offsets, per my answer below. — Bob Woodley, Jan 14 '15 at 13:32

score 1 · Answer 1 · edited May 23 '17 at 12:30

event.clientX is relative to the browser window. You want the offset relative to the canvas. So you have to select the offset for each element containing the canvas.

This is some nice clean code that will do what you want: https://stackoverflow.com/a/5932203/2195930

I use this code everytime I deal with a mouse over a canvas.

If you had a simpler test case, I'd try to mock up the whole solution for you.

score 0 · Answer 2 · answered Jan 13 '15 at 13:58

0

Try to change a code as follows:

var x = event.offsetX == undefined ? event.layerX : event.offsetX;
var y = event.offsetY == undefined ? event.layerY : event.offsetY;

mouse2D.x = ( x / renderer.domElement.width ) * 2 - 1;
mouse2D.y = - ( y / renderer.domElement.height ) * 2 + 1;

answered Jan 13 '15 at 13:58

gevaraweb

912
7
19

Here you can see the javascript code : http://www.felpone.netsons.org/web-threejs/stereos.js – stefano Jan 13 '15 at 14:43

score 0 · Answer 3 · answered Jan 13 '15 at 18:10

In your DOM, canvas appears as

<canvas width="1139" height="975"></canvas>

That is from where your script is taking height and width.

However, the real dimensions of the canvas come from the

width: 100%;
height: 100%;

in your CSS.

I would remove one of them, so that the scripting can take the correct value without problems

Threejs issue with raycaster intersection

3 Answers3

Linked