How to set zooming based on the position of cursor in mouse-wheel?

Questions
1

Hi,

I am new to Babylon.js.
How to set zooming based on the position of cursor in mouse-wheel?
I am using ArcRotateCamera & SceneLoader to load my obj file.
Kindly help me in this scenario.

1 Like
2

Welcome aboard!

Iā€™m not sure to understand, you can zoom in/out with the wheel of the mouse. For this to work, you must have attached the controls of the camera to the canvas.

Maybe you should setup a repro PG (https://playground.babylonjs.com/) to explain what you want to achieve.

3

Thanks for you reply.

In the below PG,
https://playground.babylonjs.com/#5PWC2D
I need to set the zoom based on the position of the cursor in the mouse wheel.
But if you use the mouse wheel, only the default zoom to the center of the object.
How to change the zoom based of the mouse pointer. Zoom should applied where the mouse cursor on the object.

4

Iā€™m afraid you will need to write your own wheel handler, as the arc rotate wheel handler is updating the radius property of the camera. In your case, you would also need to update the camera position I think, based on the cursor location.

5

Zoom to mouse is so standard now it should be a built in camera controller. The following code comes close (using ArcRotateCamera) but has some funny side effectsā€¦ when target is set the model jumpsā€¦

	window.addEventListener("mousemove", function () {
	// We try to pick an object
	var pickResult = scene.pick(scene.pointerX, scene.pointerY);
	if (pickResult.hit) {
		var targetPoint = pickResult.pickedPoint;
		camera.target = targetPoint;
	}
});
1 Like
6

Thanks Clovett

7

Here is a version that hacks the internals of ArcRotateCamera to get a bit closer to what we wantā€¦
Zoom to mouse position | Babylon.js Playground

1 Like
8

Nice solution!

9

Hereā€™s an even better solution:

Mouse wheel zoom to mouse position | Babylon.js Playground

2 Likes
10

I will definitely use it somewhere :slight_smile:

11

Cool, note that I saved a new version #13 that makes the debug stuff optional, just pass ā€œfalseā€ to addCameraControls and the camera target and hit plane debug visualizations will disappear. Mouse wheel zoom to mouse position | Babylon.js Playground

6 Likes
12

Thatā€™s amazing!
It would be too much to ask for a typeScript version of this playground.
Donā€™t get me wrong, I still have a lot to learn.
I would be very grateful.
Thanksā€¦

13

Iā€™m trying to build one, if I can get the babylonjs dev environment to work properlyā€¦

1 Like
14

Very cool!
The only issue is that it goes crazy when using on touch device with pinch.

15

right, I never tested it with pinch, but I can guess what is going wrong, zoom to mouse has to do both zoom and some panning, and that panning is probably fighting with the pinch zoom behavior. So yeah, Iā€™d have to also update the pinch zoom behavior to zoom into and out of the area you are pinchingā€¦

1 Like
16

I actually meant React. Iā€™m working with React, and I realize that it doesnā€™t have many examples like in pure javascript.

17

I have added it to the arcRotateCamera in this pull request:

So you can find the typescript version there.

5 Likes
18

Thanks.
But I donā€™t know if I understand, I can update babylonjs to a new version and will I have this native feature to use with React?
Sorry for my ignorance I am new to Babylon I am struggling to learn.

19

Yeah, you could wait for the PR to be merged and upgrade, or you could grab the implementation of src/Cameras/Inputs/arcRotateCameraMouseWheelInput.ts and install it into your ArcRotateCamera using something like this:

var mousewheel = camera.inputs.attached["mousewheel"];
camera.inputs.remove(mousewheel);
camera.inputs.add(new BetterArcRotateCameraMouseWheelInput());
2 Likes
20

Hmmm ā€¦ This is great. :smiley: