Cameras

The cameras are virtual viewpoints through which a scene is observed and rendered. They defines what is visible on the screen and influences how the viewer perceives the 3D environment. In Babylon.js, cameras are crucial for navigation and interaction within the scene. Core aspects of a camera:

Position and Orientation: the camera has a position in the 3D space and a direction in which it is looking. This defines the viewpoint from which the scene is rendered.
Field of View (FOV): the camera’s field of view determines the extent of the observable world that is seen at any given moment. A wider FOV can create a more immersive experience but may also cause distortion.
Projection: cameras can use different types of projections, such as perspective (which mimics the way the human eye sees) or orthographic (which maintains the object’s size regardless of distance).
Controls: cameras can be equipped with various controls, allowing users to navigate the scene using mouse or keyboard input. Common controls include zooming, panning, and rotating.
Animation: cameras can be animated to create dynamic scenes, providing smooth transitions between different viewpoints.

There are several types of camera. Here are the main ones:

Universal Camera

A combination of the FreeCamera and ArcRotateCamera, offering more control options for navigating the scene.

<universalCamera
    name="universal"
    position={new Vector3(0, 0, -8)}
    target={Vector3.Zero()}
    onCreate={camera => camera.attachControl()}
 />

Arc Rotate Camera

Allows for orbiting around a target point. It’s ideal for showcasing 3D models and environments.

<arcRotateCamera
    name="arc-rotate"
    alpha={0}
    beta={Tools.ToRadians(70)}
    radius={2}
    target={new Vector3(0, 0, 0)}
    onCreate={camera => camera.attachControl()}
/>

Follow Camera

Designed to follow a target object smoothly, often used in games to keep the player character in view.

<followCamera
    name='follow'
    position={new Vector3(0, 10, -10)}
    radius={30}
    heightOffset={10}
    rotationOffset={10}
    cameraAcceleration={0.005}
    maxCameraSpeed={10}
    onCreate={camera => camera.attachControl()}
/>

Device Orientation Camera

It leverages the device’s sensors (typically on mobile devices) to control the camera’s orientation based on the physical orientation of the device.

<deviceOrientationCamera
    name='device-orientation' 
    position={new Vector3(0, 0, -1.5)} 
    target={new Vector3(0, 0, 0)}
    onCreate={camera => camera.attachControl()}
/>

Fly Camera

Designed for flight simulations or open-environment navigation where users can freely move and rotate the camera with no constraints. The FlyCamera allows movement through the following controls by default:

W/S (or Up/Down Arrow): Move forward and backward.
A/D (or Left/Right Arrow): Strafe left and right.
Q/E: Move up and down.
Mouse Movement: Controls the camera’s yaw (left/right rotation) and pitch (up/down rotation).

<flyCamera name='fly' 
    position={new Vector3(0, 0, -5)} 
    rollCorrect={10} 
    bankedTurn 
    bankedTurnLimit={Tools.ToRadians(90)} 
    bankedTurnMultiplier={1}
    onCreate={camera => camera.attachControl()}
/>

Learn More

For other cameras, properties and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/cameras/camera_introduction.

Engine/Scene Lights