How to best move the orthographic camera?

Questions
,
1

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

A solution in Zoom where move cursor is in orthographic mode 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:

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.

2

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:

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

2 Likes
3

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.
For example, check this - 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.

2 Likes