Zooming on a 2D image

Hi all,
I am using an Orthographic camera to display an image. I have created my own zooming & panning controls, but I am not content with the zooming. When I scroll forward I add 1 to the camera.zoom and when I scroll backwards I subtract 1 from camera.zoom. This all works fine it zooms in and out, but when you zoom in it starts out with what looks like bigger “steps” and slows down when zooming in furthur. So it takes alot of scrolls to get a close up of the image.

Something more visual.
No zoom, zoom level 0:

First scroll, zoom level 1:

It scrolls in a whole lot even though it only went forward by 1. Here’s how I do it:

this._camera.zoom += direction;

This code gets called every time the scroll event is triggered, and direction is -1 when scrolling backwards & 1 when scrolling forwards.

Here’s another example for when you’re close up to the image:
Zoom level 20:

Zoom level 21, one scroll forward:

It barely shows any zooming.
I am looking for a more consistant way of of zooming in & out of the image.
Anyone who might have an idea please let me know!

Start with default zoom = 1 (as in OrthographicCamera). Change zoom levels not by adding and subtracting, but by multiplying and dividing:

  • zoom = zoom * k
  • zoom = zoom / k

You may need to adjust the value for k, e.g. start with k=1.02. If k is closer to 1, the visual steps will be smaller.

1 Like

That worked! I’ve changed the line to:

this._camera.zoom = direction > 0 ? this._camera.zoom * 1.02 : this._camera.zoom / 1.02;

So when direction is greater than 0, it multiplies the current zoom value by 1.02 and applies it to the camera, and zooms in. And when direction is less than 0, it devides the current zoom value by 1.02 and applies it, zooming out. It’s perfectly consistant and gives me the result I was looking for!

Thank you!

1 Like