# How to best move the orthographic camera?

**URL:** <https://forum.babylonjs.com/t/how-to-best-move-the-orthographic-camera/57745>\
**Category:** Questions\
**Tags:** camera, orthographic\
**Created:** [April 10, 2025, 9:27am UTC](https://forum.babylonjs.com/t/how-to-best-move-the-orthographic-camera/57745 "2025-04-10T09:27:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![renku](https://avatars.discourse-cdn.com/v4/letter/r/7bcc69/32.png) [@renku](https://forum.babylonjs.com/u/renku)\
**Post date:** [April 10, 2025, 9:27am UTC](https://forum.babylonjs.com/t/how-to-best-move-the-orthographic-camera/57745/1 "2025-04-10T09:27:14Z")

</div>

I’m trying to find a solution to both move and zoom an orthographic camera.

[A solution](https://playground.babylonjs.com/#EBPQH9#28) in [Zoom where move cursor is in orthographic mode](https://forum.babylonjs.com/t/zoom-where-move-cursor-is-in-orthographic-mode/4360/27) suggests using `orthoLeft`, `orthoRight`, `orthoTop` and `orthoBottom` to achieve both zooming and camera movement while zooming.

However that solution still relies on the builtin behavior of the camera to achieve panning, which changes the `target` of a camera. That results in a strange situation where camera location is defined by a combination of `ortho*` properties and `target`. For example, you can end up in a situation where camera target is at `5,0,0` and `orthoLeft = 10`, `orthoRight = 20`, which means:

- the camera is actually centered at `20,0,0`,
- not at `5,0,0` where it would be if you would look at `target` alone, and
- not at `15,0,0` where it would be if you only looked at the `ortho*` properties alone.

The software engineer in me says that continuing with this approach will cause even more mess and confusion in the future, so I think I should find a better approach.

To eliminate this mismatch I tried to implement camera panning using the just the `ortho*` properties:

> **[Babylon.js Playground](https://playground.babylonjs.com/#EBPQH9%23141)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

This almost works, but some sort of shaking occurs, which gets worse and worse as you keep panning for longer and longer.

**Alternatively** I’m open to moving the camera by changing its `target` (which might be the more correct approach), but then I’d need a different implementation of the zooming functionality. I’ve tried to implement it as a combination of `ortho*` and `target`, but didn’t manage to make it work.

---

<div class="post-metadata">

**Author:** ![renku](https://avatars.discourse-cdn.com/v4/letter/r/7bcc69/32.png) [@renku](https://forum.babylonjs.com/u/renku)\
**Post date:** [April 10, 2025, 10:08am UTC](https://forum.babylonjs.com/t/how-to-best-move-the-orthographic-camera/57745/2 "2025-04-10T10:08:52Z")

</div>

I figured out where I went wrong…

I forget to take into account that after the first pointer movement event the camera position had already changed, but I was still referencing the original position. Here’s the fixed example:

> **[Babylon.js Playground](https://playground.babylonjs.com/#EBPQH9%23142)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

However, please do comment if you think that perhaps this whole approach is misguided.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 10, 2025, 11:55am UTC](https://forum.babylonjs.com/t/how-to-best-move-the-orthographic-camera/57745/3 "2025-04-10T11:55:05Z")

</div>

Any approach that works for you is not misguided!

With this type of camera and mouse input, this seems to be a great way to go.

You could implement a different custom camera input, to support mouse and keyboard. The general gist is explained here - [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/cameras/customizingCameraInputs/).  
For example, check this - [https://playground.babylonjs.com/#EBPQH9#145](https://playground.babylonjs.com/#EBPQH9#145) . it is a free camera. Notice that your implementation is still working (after disabling the mouse input), and keyboard is working, but with left/right and pageup/page down. Change the keybaoard input correctly (a simple custom fix for you) would allow keyboard to also work as you expect it ti.