Update Three.js Raycaster After CSS Tranformation

Question

I am trying my hands on WebGL using Three.js. I am a beginner and I decided to try out something similar to this. I have been able to achieve most of it. The issue I am curr

Answer 1

1) Please include the full code of your fiddle. When (not if) your fiddle goes away, so does the context of your question, and this answer.

2) You're attaching the mouse events to the document, not to the part that's moving. Use this instead:

canvas.addEventListener('mousemove', onDocumentMouseMove, false);
canvas.addEventListener('mousemove', onHover, false);

3) clientX/clientY don't behave how you're expecting them to. Use offsetX/offsetY to get the coordinates relative to the canvas (provided you followed step 2). (Don't worry that MDN says it's experimental, it works just fine in browsers that support WebGL.)

mouse.x = (event.offsetX / SCREEN_WIDTH) * 2 - 1;
mouse.y = - (event.offsetY / SCREEN_HEIGHT) * 2 + 1;