#Mouse coordinates javascript update#
#Mouse coordinates javascript series#

I looked at Raycasting but IвЂ™m not entirely sure if that is the path I should follow. IвЂ™m not focusing on mouse events against children in the scene (a new design would have no children anyway), only the (theoretical infinite +X and -Y) coordinates in the scene where the mouse is hovering/clicked. I have tried several different examples to get the +X and -Y position of the mouse (with respect to the origin of the scene) as 3D coordinates and not 2D DOM coordinates since some design elements would have a position X,Y (CSS top,left) greater than the current view-port of the device they were on. This way my end users would not have to re-learn or re-design their projects that were based on the 0,0 index always being in the top-left, rather than the center. So as a public service, I offer this page which has JavaScript examples for finding the coordinates of the mouse for different reference points. Then I would just multiply the -Y by -1 to get a +Y and divide +X and +Y by 12 and floor each to get the corresponding cell index as if it were still an HTML table. Dealing with mouse position in JavaScript is annoying. My goal is to confine designs to the 4th quadrant (+X,-Y).

#Mouse coordinates javascript series#

The вЂњtableвЂќ is drawn as a series of THREE.Lines spaced 12 points apart from one another. The user would be shown the current вЂњcell вЂќ for reference. In picture below, the camera and orbit controls are shifted so that the origin (0,0,0 ) is in the top-left (DOM style), rather than the center. You can right click the icon of any running AHK script and select 'Window Spy', or you can search for 'Window Spy' in the Windows start menu. Some designs have hundreds, if not a thousand individual 12x12 pixel elements all being rendered at the same time. In the other application that used these designs, the table was not rendered which helped increase performance but still took its toll on mobile devices when the designs became very large (sometimes extending folds beyond the view-port). The table was only used for position referencing. The following line creates the map: var map new esri.Map('map') 'Map' appears three times in the above line.

#Mouse coordinates javascript update#

This is made possible by event listeners that update the the x and y coordinates whenever the mouse moves. Since its just one cube, I can only assume finding the intersection wont be that hard and. As long as we know the amount that was translated in both directions, we can subtract that from the mouse cursor position and well get the correct coordinates. This sample reports the coordinates of the mouse pointer as the user hovers or drags the mouse across the map. IвЂ™m re-writing an existing application where a user would click cells in an HTML table and place predefined design items in them and then save that design to be used in another application. I am using a plain WebGL, I dont use THREE.js or anything like that.