BabylonJS - Cameras


Advertisements

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 like 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);
Advertisements