BabylonJS cameras
BabylonJS is an open-source, robust JavaScript framework for creating and rendering 3D graphics and immersive experiences directly in web browsers.
Note: Learn more about BabylonJS.
Camera
The camera in BabylonJS defines the view of a 3D scene visible to the user on the screen. There are four types of cameras BabylonJS offers:
Free Camera
Arc Rotate Camera
Follow Camera
Universal Camera
The FreeCamera syntax
This camera allows the user to navigate the scene using keyboard and mouse controls freely. It provides a first-person perspective and is often used in games and interactive applications.
Syntax
var camera = new BABYLON.FreeCamera(label, position, scene);
label: The name of the camera, which can be any string.position: The initial position vector of the camera as aBABYLON.Vector3object.scene: The BabylonJS scene to which the camera belongs.
Example code
We can see that the highlighted line uses FreeCamera to display objects on the scene. You can change the values of the new BABYLON.Vector3(0, 5, -10) vector to see how the view changes.
The ArcRotateCamera syntax
This camera revolves around a target point, simulating an orbiting behavior. It's commonly used for 3D visualization, architectural walkthroughs, and camera animations.
Syntax
var camera = new BABYLON.ArcRotateCamera(label, alpha, beta, radius, target, scene);
label: The name of the camera.alpha: The angle in radians to rotate the camera horizontally (left-right).beta: The angle in radians to rotate the camera vertically (up-down).radius: The distance from the camera to the target point.target: The point in 3D space that the camera is focused on as aBABYLON.Vector3object.scene: The BabylonJS scene to which the camera belongs.
Example code
You can see that the highlighted line in the code above, uses ArcRotateCamera to display objects on the scene. This camera view also offers two rotating angles and a radius of curvature in addition to the BABYLON.Vector3 object. You can change these values to see how the view changes.
The FollowCamera syntax
This camera is designed to follow a target object while maintaining a specified distance and angle from it. It's useful for scenarios like third-person character controls.
Syntax
var camera = new BABYLON.FollowCamera(label, position, scene);camera.lockedTarget = targetMesh; // Set the target mesh to follow
label: The name of the camera.position: The initial position of the camera as aBABYLON.Vector3object.scene: The BabylonJS scene to which the camera belongs.
Example code
You can see that the highlighted line uses UniversalCamera to display objects on the scene. Change the values of the offsets to see how the camera view keeps the "icosphere" object (defined on line#28) as a target pivot.
The UniversalCamera syntax
It is a versatile camera that combines features of different camera types, such as free movement and optional automatic collision avoidance.
Syntax
var camera = new BABYLON.UniversalCamera(label, position, scene);
label: The name of the camera.position: The initial position of the camera as aBABYLON.Vector3object.scene: The BabylonJS scene to which the camera belongs.
Example code
You can see that the highlighted line uses UniversalCamera to display objects on the scene. You can change the parametric values to see how the view changes.
Conclusion
These are the main camera types in Babylon.js. Each camera type serves different purposes and provides specific functionalities. We can choose the camera type that fits our project's requirements and customize its properties and behavior accordingly.
Note: Read more about BabylonJS meshes and lights.
Free Resources
