Standard Cameras

Table of contents

Babylon.js Standard Cameras
Further Reading
- Intermediate
- Advanced

Babylon.js Standard Cameras

The two standard cameras are - the Universal Camera used for First Person Movement and the Arc Rotate Camera which is an orbital camera. Please note that these cameras require the third-party file hand.js.

Universal Camera

This was introduced with version 2.3 of Babylon.js and is controlled by the keyboard, mouse, touch or gamepad depending on the input device used, with no need for the contoller to be specified.

The Universal Camera is now the default camera used by Babylon.js if nothing is specified, and it’s your best choice if you’d like to have a FPS-like control in your scene.
All demos on babylonjs.com are based upon that feature. Plug a Xbox controller into your PC and using it you’ll still be able to navigate most of our demos.

The default actions are

keyboard - left and right arrows move the camera left and right, up and down arrows move it forwards and backwards;
mouse - rotates the camera about the axes with the camera as origin;
touch - swipe left and right to move camera left and right, swipe up and down to move it forward and backwards;
gamepad - corresponds to device.

Constructing a Universal Camera


// Parameters : name, position, scene
    var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);

// Targets the camera to a particular position. In this case the scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

// Attach the camera to the canvas
    camera.attachControl(canvas, true);

A Playground Example of a Universal Camera -

Arc Rotate Camera

This camera always points towards a given target position and can be rotated around that target with the target as the centre of rotation. It can be controlled with cursors and mouse, or with touch events.

Think of this camera as one orbiting its target position, or more imaginatively as a spy satellite orbiting the earth. Its position relative to the target (earth) can be set by three parameters, alpha (radians) the longitudinal rotation, beta (radians) the latitudinal rotation and radius the distance from the target position. Here is an illustration:

alpha = 0 and beta = 0 should give a position directly over the 'north' pole (0, radius, 0) however for technical reasons this is not possible and in this situation beta is offset by 0.1 radians (about 0.6 degrees).

Both alpha and beta increase in a clockwise direction.

The position of the camera can be set from a vector which will overide any current value for alpha, beta and radius. This can be much easier than calculating the required angles.

Whether using the keyboard, mouse or touch swipes left right directions change alpha and up down directions change beta.

Panning with an ArcRotateCamera is also possible by using CTRL at the same time as the input methods above.

Constructing an Arc Rotate Camera


// Parameters : name, position, scene
    var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);

// Targets the camera to a particular position. In this case the scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

// Attach the camera to the canvas
    camera.attachControl(canvas, true);

// Parameters: alpha, beta, radius, target position, scene
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

// Positions the camera overwriting alpha, beta, radius
    camera.setPosition(new BABYLON.Vector3(0, 0, 10));

// This attaches the camera to the canvas
    camera.attachControl(canvas, true);

A Playground Example of an Arc Rotate Camera -

Comparisons between Cameras

In both the above playgrounds the starting positions and targets have been set to be the same and the different way they handle controls can be seen.

basics