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. You might be aware that the top-left corner of the browser is represented with (0,0). The page represents the whole rendered page and that includes the visible area as well as scrolled area in the browser. Various Ways of Tracking Mouse Events in JavaScript To track the mouse position, we have to find its x-axis (horizontal position) and y-axis (vertical position) inside the browser’s tab. But there is a difference between page and client coordinates. 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. You can also go with clientX and clientY properties to get mouse coordinates. My goal is to confine designs to the 4th quadrant (+X,-Y). 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. The MouseEvent Object The MouseEvent Object handles events that occur when the mouse interacts with the HTML document. 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. 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). Get the Mouse position (coordinates) in React Set the onMouseMove prop on an element or add an event listener on the window object. The table was only used for position referencing. The JavaScript script presented in this page can be used to Get Mouse coordinates inside a HTML element, usually a Div or an Image. Then event.currentTarget will do the trick.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. If you use event.target and hover your mouse over div2, you will get relative coordinates regarding div2 while you might want them to be regarding div0. It makes the difference when you want to attach a listener to some element that has multiple children. event.currentTarget is the element that the event listener is attached to.event.target is the element that triggered the event (e.g., the user clicked on or hovered on).Now x and y are the relative coordinates. The mouses position is reported on the event object. I recommend using currentTarget instead of target: const handleEvent = (event) =>Ĭonst bounds = () To get the current position of the mouse, attaching an event handler to any mouse action is required. So far I have this function onMousemove(event) Īlthough the answer of Nikita Volkov is pretty solid, it might not work as expected in some cases. I am trying to get the mouse position relative to the div with the id container. I currently have a div structured with other elements inside of it.
0 Comments
Leave a Reply. |