Zoom where move cursor is in orthographic mode

I’m looking to have the zoom act like the following video:

I’ve got it pretty close! But it doesn’t feel very smooth right now:

https://playground.babylonjs.com/#EBPQH9#14

Also I had to switch to using Z instead of Y for the Y offset from BABYLON.Unproject which I don’t understand why.

1 Like

Z instead of Y is because your camera is looking down Y axis so this is expected.

For smoothness, you just need to reduce the delta value

2 Likes

@davidworkman9

camera.panningSensibility = 6250 / Math.abs(camera.orthoLeft);

Why did you use the number 6250 ? I am trying to understand your code.

@constantinos I brought that in from the project I’m working on. It’s the constant that I found for my use case felt the best at the various zoom levels I allow.

For anyone that’s curious, I ended up changing the orthoLeft/Top/Right/Bottom to get it to zoom the way I wanted rather than changing the target and position of the camera. It works really well.

https://playground.babylonjs.com/#EBPQH9#19

2 Likes

Thanks for sharing this. I’ve been a bit stumped by the default zooming behavior by the orthographic camera mode.

I still can’t seem to get this to work on Firefox (v73.0, Linux). Any idea what might be missing?
I have no issues on Chrome…

Can you share a repro of what does not work in firefox using our Playground?

Looks like it’s related to event.wheelDelta being undefined. There’s a topic about this here:

With the solution being to used event.deltaY instead. Here’s a playground with that change. I tried it in Firefox on Mac and it’s working:

1 Like

Well so it works now? :slight_smile:

https://playground.babylonjs.com/#EBPQH9#23
In the above PG, it’s working for 2D view.
How to apply the same for 3D view?

It does work in 3D too: just use the right mouse button to rotate the scene.

Thanks, Its worked for the sample sphere shape. I have tried with obj file in SceneLoader. It’s not working for me.

I have commented the sphere shape and ground line code and added the below lines,

BABYLON.SceneLoader.Append("/assets/", “RAB.obj”, scene, function (meshes) {
scene.createDefaultCameraOrLight(true, true, true);
});

After added this lines, zoom to the cursor it not working. Default zoom only working.
Can you help?

It does work correctly for me with an external asset:

https://playground.babylonjs.com/#EBPQH9#27

You should provide a PG with your own asset if that does not work for you.

1 Like

I am getting error in this line
scene.activeCamera.alpha += Math.PI; // camera +180°
(error TS2339: Property ‘alpha’ does not exist on type ‘Camera’.)

alpha only exists for arc rotate cameras: your camera must be a free camera.

OK. I have used same code in the PG (https://playground.babylonjs.com/#EBPQH9#27)

But still, I got the same error.

The error is on totalX:

image

It seems camera.panningSensibility = 6250 / Math.abs(totalX / 2); should be inside if (zoomTarget) {.

Yes, I have changed already. After changes the package.json, its working for me.
But the after certain level of zoom, object is flipped. Is it possible to set the zoom level? so the flip of object can be avoided.

Just don’t call zoom2DView if the total zoom value is reaching a given value:

https://playground.babylonjs.com/#EBPQH9#28

2 Likes

Thanks, it’s working as per your reply.