BabylonJS - Cameras

BabylonJS has many cameras that can be used. At a time, only one camera will be active for a scene.

In this chapter, we will learn how to go about using cameras in BabylonJS.

FreeCamera

Let us now see how the FreeCamera works.

Syntax

Following is the syntax for the FreeCamera −

var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);

This is the position in which the camera is placed - new BABYLON.Vector3(0, 1, -15).

Changing the direction will change the direction. You can change the values and see how the camera behaves on the scene.

Following are the parameters used by the FreeCamera −

Name

Position

Scene

ArcRotateCamera

This camera rotates around a given target pivot. It can be controlled with cursors and mouse, or with touch events. Parameters are name, alpha, beta, radius and target.

Syntax

var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

ArcRotateCamera points in the +x direction. To change the position of the camera, use the setPosition property.

camera.setPosition(new BABYLON.Vector3(0, 0, -100));

The ArcRotateCamera is an excellent camera to animate. The following command will help you rotate the camera around the target −

scene.activeCamera.alpha += .01;

TouchCamera

Touch is a type of a gesture . It can be on a pad or screen, with finger(s), stylus, glove, feet, or laser pointer. Any movement that can be sensed... can be considered a gesture.

Syntax

Following is the syntax for TouchCamera −

var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);

GamepadCamera

This camera is specially designed to be used with gamepad.

Syntax

Following is the syntax for the Gamepad Camera −

var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 15, -45), scene);

DeviceOrientationCamera

This camera is specially designed to react to device orientation events cases pke when you tilt your device forward or backward, left or right, etc.

Syntax

var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 1, -15), scene);

FollowCamera

FollowCamera is designed to follow any scene item with a position. It can follow from rear, front or from any angle.

Syntax

Following is the syntax for the FollowCamera −

var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 15, -45), scene);

VirtualJoysticksCamera

This camera is designed to react to Virtual Joystick events. The Virtual Joysticks are on-screen 2D graphics that are used to control cameras or other scene items.

Syntax

Following is the syntax for the VirtualJoysticksCamera −

var camera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 1, -15), scene);

AnaglyphCamera

The AnaglyphCamera is for use with red and cyan 3D glasses. It uses post-processing filtering techniques.

AnaglyphArcRotateCamera

Following is the syntax for the AnaglyphArcRotateCamera −

var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

AnaglyphFreeCamera

Following is the syntax for the AnaglyphFreeCamera −

var camera = new BABYLON.AnaglyphFreeCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

VRDeviceOrientationFreeCamera

The VRDeviceOrientationFreeCamera uses FreeCamera as its basis, so the properties and methods of FreeCamera are also found on our VRDeviceOrientationFreeCamera.

Syntax

Following is the syntax for the VRDeviceOrientationFreeCamera −

var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0);

WebVRFreeCamera

The WebVRFreeCamera uses FreeCamera as its basis, so the properties and methods of FreeCamera are also found on our WebVRFreeCamera.

Syntax

Following is the syntax for the WebVRFreeCamera −

var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);

In most of the demos, you will see attachControl where the camera is attached to the canvas.

Example

camera.attachControl(canvas, true);