ArcRotateCamera in Babylon.js

This quarter I have been in a class on computer graphics working out of Babylon.js. As I was working on one of my projects, I found the general examples of how to use the ArcRotateCamera did not completely answer all my questions. I thought I would share what I found as I explored the documentation here.

If you are unfamiliar with cameras in Babylon.js, here is their introductory article on the subject. Babylon has several types of cameras such as universal (a camera that follows the actions of a controller), follow (a camera that targets an object and maintains a set distance), arc rotate (a camera which rotates around a set point) and various VR cameras. The basic declaration of an ArcRotateCamera would look something like this:

// Parameters: name, alpha, beta, radius, target position, scene

var camera = new BABYLON.ArcRotateCamera(“Camera”, 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

camera.setPosition(new BABYLON.Vector3(0, 0, 10));

camera.attachControl(canvas, true);

When I started making a moving character, my initial choice in camera was a follow camera. However, I found that I still wanted to be able to change the angle at which I viewed the character even though I wanted them to be the center of focus.

To achieve this effect, I found that you can actually target the ArcRotateCamera at a mesh:

camera.target = character;

This allows you to freely rotate around the character even as you move them around the scene.

            The next thing to consider is how far you want the camera to zoom in and out as well as the rate at which you change this information. You can change this by setting the camera’s radius limit.

camera.lowerRadiusLimit = 2; // set how close the camera can get to the target

camera.upperRadiusLimit = 10; // set how far the camera can zoom out

camera.noRotationConstraint = false; // enable constraints

camera.wheelDeltaPercentage = 0.01; // change rate at which scroll wheel changes zoom

Alpha and Beta illustration for ArcRotateCamera

With this data set you can now zoom in and out without passing through your character or getting so far away that you can not see them.

            After defining this information, I found that I still had one more problem. When I paned up and down I could still pass through the ground and look at my objects from below. While this may be appealing in some cases I was interested in restricting this property. When it comes to the ArcRotateCamera class, you can set both the upper and lower alpha and beta limits. Alpha refers to the arc parallel to the x-axis while beta refers to the arc parallel to the y-axis. To restrict the camera from passing through the ground I constrained the upper and lower beta limit:

camera.lowerBetaLimit = 0; // adjust how close you can get to the y axis

// adjusts the limit of the arc from the y axis in the x/z direction

camera.upperBetaLimit = 1.5;

To get more precise limits, you may wish to use radians, or if you are more familiar with degrees use the degree * 2 * Math.PI / 360. (There are 2ᴨ radians in 360°)

            At this point I was fairly happy with my camera, but there are a few more things of interest that I ran into in my exploration of the API. You can set inertial values for a number of settings on the camera from Alpha or Beta to directional panning. Each of these has a slightly different effect based on the tag. For example:

// when the camera is originally placed it will complete a number of revolutions sideways

camera.inertialAlphaOffset = 1;

// zooms camera in at start of program

camera.inertialRadiusOffset = 1;

// sets the rate a camera slows from a rotation. You can also adjust panningInertia

camera.inertia = 0.9;

In addition to these basic settings, you can also add some unique camera behaviors detailed here. These behaviors include a bouncing behavior which makes the target zoom slightly out of bounds before locking into place. You can also add auto rotation which defaults to a slow spin around the scene or framing behavior which zooms in on the object when first setting the scene.

camera.useBouncingBehavior = true;

camera.useAutoRotationBehavior = true;

camera.useFramingBehavior = true;

All of these effects sit above the original camera class which adds a whole new layer of complexity. You can change the projectionPlaneTilt property to change to more of an orthographic view as well as setting various ortho graphic bounds. You can also rig multiple cameras to approximate views for virtual reality. If you are interested in exploring the camera class or the arc rotate camera I hope that this gave you some ideas about where to look for your project.