Jacopo Terrinoni Jacopo Terrinoni - 3 months ago 18
HTML Question

Mouse coordinates over HTML page

i am trying to use an example from the three.js page's, the voxel painter one. In this example the mouse coordinates's are used to move a roll-over helper that indicates the position where a box will be placed after the click.

mouse.set((event.clientX/window.innerWidth)*2-1, -(event.clientY/window.innerHeight)*2+1);


This piece of code calculates the position of the mouse all over the page.
I have added other div elements in the page such that the total amount of space for the webGL canvas is different from the total amount of space in the page, the new dimensions of the webGL canvas are 95% of the total height and 85% of the total width.

Now, the mouse position's over my webGL canavas is obviously different therefore the roll-over helper does not overlap anymore the position of the mouse. How have i to modify the above piece of code?

Answer

You could use jQuery to detect mouse position which works off any jQuery object passed to it.

$(function() {
  var xCoord, yCoord;
  $(document).on("mousemove", function(event) {
    xCoord = event.pageX;
    yCoord = event.pageY;
    console.log("x: "+ xCoord+ ", y: "+ yCoord);
  } );
} );

Just change the jQuery selector to your canvas and jQuery will handle the rest.

Hope this helps!

Comments