Can't get Three.js onDocumentMouseDown to work correctly

Question

I\'ve looked at a lot of examples -- and borrowed from some -- and can\'t seem to get this to work right. What I want is for the raycaster in onDocumentMouseDown to pick up

Answer 1

Your Three.js canvas probably isn't at the top left of the screen, and you're not taking into account the offset from 0,0 on the page. To fix it, adjust the mouse position to subtract the offset.

var rect = container.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / renderer.domElement.clientHeight) * 2 + 1;