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.
Let us now see how the FreeCamera works.
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
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.
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;

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.
Following is the syntax for TouchCamera −
var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);

This camera is specially designed to be used with gamepad.
Following is the syntax for the Gamepad Camera −
var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 15, -45), scene);

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.
var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 1, -15), scene);

FollowCamera is designed to follow any scene item with a position. It can follow from rear, front or from any angle.
Following is the syntax for the FollowCamera −
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 15, -45), scene);

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.
Following is the syntax for the VirtualJoysticksCamera −
var camera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 1, -15), scene);

The AnaglyphCamera is for use with red and cyan 3D glasses. It uses post-processing filtering techniques.
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);

Following is the syntax for the AnaglyphFreeCamera −
var camera = new BABYLON.AnaglyphFreeCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

The VRDeviceOrientationFreeCamera uses FreeCamera as its basis, so the properties and methods of FreeCamera are also found on our VRDeviceOrientationFreeCamera.
Following is the syntax for the VRDeviceOrientationFreeCamera −
var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0);

The WebVRFreeCamera uses FreeCamera as its basis, so the properties and methods of FreeCamera are also found on our WebVRFreeCamera.
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.
camera.attachControl(canvas, true);

 Print
 Add Notes
 Bookmark this page