How can I make zoom to mouse cursor in GUI, like in Google Maps?

Questions
1

Notice that now GUI zoomed always in center of screen. But I want to be able to zoom to mouse cursor position, like they do in Google Maps.

2

Hello @GreatRash , how are you doing?

You can try to use the transformCenterX and transformCenterY properties of the BABYLON.GUI.Container to control the point from which the scaling will be applied.

Then, is just a matter of finding the correct values for those properties based on the e.offsetX and e.offsetY. You might need to do some calculations to transform those values from screen space to relative positions on the BABYLON.GUI.Container,

3

Why Grid is jumping? Try to move cursor to right side of the window and zoom out, and then move cursor to left side of the window and zoom in.

5

Sorry for the wait, but our wonderful @RaananW came up with a great solution :smiley: GUI zoom | Babylon.js Playground (babylonjs.com)

3 Likes
7

That works just beautifully. :heart_eyes: :heart_eyes: Bookmarked :smiley:

2 Likes
8

Just saw this. Thank you!