Mouse coordinates over HTML page

Question

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?

It looks like on their example page all of the examples are wrapped in an iframe so the window.innerWidth / window.innerHeight refers to the height and width of the iframe — John Sparwasser
– John Sparwasser, Commented Aug 24, 2016 at 14:27

Mike · Accepted Answer · 2016-08-24 14:26:29Z

1

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!

answered Aug 24, 2016 at 14:26

Mike

6472 gold badges7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pawel Over a year ago

Tip: stop using jQuery.

Jacopo Terrinoni Over a year ago

Thank you for your answer! The coordinates of the mouse are relative to the whole page and not only to the div element that i want.

Mike Over a year ago

you are using a canvas for displaying stuff that triggers the mouse over correct? The example I gave you references the whole doc, yes. However, you can change the reference object to you're div or canvas or whatever it is that's displaying your info. You could even bring it one step farther through CSS styling and set its position to relative making the top left corner of the obj (0, 0) and the event.pageX/Y will return those coords respective to that corner.

Christoph · Accepted Answer · 2016-08-24 14:26:20Z

1

If you want the global position of the mouse cursor on your page, you should rather use the page coordinates like this:

event.pageX
event.pageY

answered Aug 24, 2016 at 14:26

Christoph

1,6319 silver badges20 bronze badges

Collectives™ on Stack Overflow

Mouse coordinates over HTML page

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related