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

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

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.

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.

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.

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;
	}
});

Thanks Clovett

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

Nice solution!

Here’s an even better solution:

Mouse wheel zoom to mouse position | Babylon.js Playground

2 Likes

I will definitely use it somewhere :slight_smile:

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

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…

I’m trying to build one, if I can get the babylonjs dev environment to work properly…

1 Like

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

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

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

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

So you can find the typescript version there.

3 Likes

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.

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());
1 Like

Hmmm … This is great. :smiley: