Rotating, Panning, and Zooming a Camera in Unity

————————————————

Link to code on bottom of post. ↓

————————————————

In Caelium, one of the features I wanted was simple camera movement system that could rotate the camera, pan it on the plane defined by its forward direction, and zoom. In the video, I demonstrate the movement of a camera in Unity.

To rotate the camera, you left click the mouse and move around. To pan the camera, you right-click the mouse and move around. To zoom, you middle click the mouse and move up or down.

By no means is it perfect, but what I have now is pretty good, as you can see in the video. I’ll explain how the movements work.

————————————————

I’ll start with zooming since that’s the simplest. You move the camera forward or back by a numerical factor. In my implementation, the factor is calculated based on the displacement of the mouse’s position from the point the mouse was at when zooming was enabled. This factor is used in all the camera movements. This part of the code came from a Unity forum topic about camera movement, so credit for this snippet goes to damien_oconnell:

Vector3 pos = Camera.main.ScreenToViewportPoint(Input.mousePosition - mouseOrigin);

The pos is the factor that determines how much rotation, panning, or zooming happens. It’s used when calculating the camera’s change in position that’s needed for zooming:

Vector3 move = pos.y * zoomSpeed * transform.forward;
transform.Translate(move, Space.World);

The move vector is used to move the camera. Only the y factor in pos is needed because we only want to zoom if the mouse moves up or down. The zoomSpeed is  a public variable (a float) that’s used to adjust the right amount of zoom.

————————————————

The panning code used the pos factor to determine how much to pan. In the code snippet, pos.x pans the camera in its x-dimension (left and right) and pos.y pans in the y-dimension (up and down). I attribute this code to damien_oconnell from the Unity Forum link mentioned before (here, the panSpeed is a public variable to adjust panning):

Vector3 move = new Vector3(pos.x * panSpeed, pos.y * panSpeed, 0);
transform.Translate(move, Space.Self);

The big difference here is that we use Space.Self, and not Space.World. The reason is because we want to pan the camera along a plane defined by the camera’s forward direction, not the world’s forward direction. Using the camera’s forward direction, we can pan consistently with respect to the camera, even if the camera is rotated in some obscure angle.

————————————————

I had a little trouble with rotating the camera, but I figured it out eventually. The premise for rotating was when the mouse moved up and down, the camera would look up or down. If the mouse moved left or right, the camera would turn left or right.

The problem was when I tried rotating the camera starting with its up direction being the same as the world’s up direction, rotating at an obscure angle would cause the camera’s up to be misaligned with the world’s up.

Before talking about how I fixed this, I’ll talk about the rotation code. To rotate the camera, you call RotateAround(), which takes a position that is used as the center of rotation, the axis in which to base the rotation, and the angle of rotation desired (in the code, the turnSpeed is a public variable to tweak the change in rotation):

transform.RotateAround(transform.position, transform.right, -pos.y * turnSpeed);
transform.RotateAround(transform.position, transform.up, pos.x * turnSpeed);

When moving the mouse diagonally, the camera’s transform.up would not point in the same direction as the up direction defined by the world (which technically never changes). It turns out that to keep the camera’s up direction pointing the same constant direction, I had to rotate with respect to the world as opposed to the camera. See the revised snippet for rotation:

transform.RotateAround(transform.position, transform.right, -pos.y * turnSpeed);
transform.RotateAround(transform.position, Vector3.up, pos.x * turnSpeed);

Notice how I’m now using Vector3.up instead of transform.up. If you watched in the video, you’ll notice that the gray plane in the background is always aligned as a straight horizontal line and never goes diagonal. That’s how you know it works.

>>> You can get the whole script on GitHub Gist. Feel free to use it in your own projects. <<<

Update: A new version of this script is available here. It features smooth stopping with inertia.

Advertisement