Three.js intersection raycaster

Question

I have created some geometry and some functions to move and detect it. It works perfect but now I have inserted it into a javascript UI library http://dhtmlx.com/ and doesn't work well. The problem is this: for example using raycaster, it find intersection with geometry also when geometry isn't under the mouse. It looks like all geometries are moved up from original position and draw is a fake.

I made an example in this url : http://www.felpone.netsons.org/web-threejs%20-%20Copia/contact_manager/prova2.html. You can see the complete code in the console.

As you can see in the live example you can drag the cube also if you click above it.

Answer 1

I think its because mouse coordinates are document coordinates, and not the coordinates in your canvas.

In my applications I determine the correct coordinates for rays like this:

var mouseX = event.clientX - myCanvas.offsetLeft;
var mouseY = event.clientY - myCanvas.offsetTop;

var mouseXForRay = (mouseX / this.canvas.width) * 2 - 1;
var mouseYForRay = -(mouseY / this.canvas.height) * 2 + 1;