ScreenSpaceTiltOrbitCameraController

A camera controller that allows tilting and orbiting the camera around a target position in screen space by clicking and dragging the mouse or touching and dragging on a touch screen.

new Cesium.ScreenSpaceTiltOrbitCameraController(options)
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 43

Creates a new instance of ScreenSpaceTiltOrbitCameraController.
Name Type Description
options ScreenSpaceTiltOrbitCameraController.ControllerOptions optional The options for configuring the controller.
Examples:
viewer.scene.screenSpaceCameraController.enableInputs = false;
viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;

const tiltOrbitController = new Cesium.ScreenSpaceTiltOrbitCameraController();
viewer.addController(tiltOrbitController);
// Configure the controller to use the left mouse button for tilting and orbiting instead of the default right mouse button.
const tiltOrbitController = new Cesium.ScreenSpaceTiltOrbitCameraController({
 dragInputs: [{ button: Cesium.MouseButton.LEFT }]
});
viewer.addController(tiltOrbitController);

Members

dragInputs : Array.<ScreenSpaceInputBindings.InputBinding>
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 97

The drag input bindings that control tilting. Each binding is a combination of the mouse button and an optional keyboard modifier.
See:

enabled : boolean
engine/Source/Scene/Controllers/Controller.js 19

Determines if the controller is enabled and should be updated by the host scene.

maximumMovementRatio : number
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 201

A parameter in the range [0, 1) used to limit the range of inputs to a percentage of the window width/height per animation frame. This helps keep the camera under control in low-frame-rate situations.
Default Value: 0.1

maximumOrbitVelocity : number
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 165

The maximum orbit velocity in radians per second. A value of Number.POSITIVE_INFINITY means that the maximum orbit velocity is unbounded.
Default Value: CesiumMath.TWO_PI

maximumTiltVelocity : number
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 130

The maximum tilt velocity in radians per second. A value of Number.POSITIVE_INFINITY means that the maximum tilt velocity is unbounded.
Default Value: CesiumMath.PI

minimumOrbitTiltAngle : number
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 144

The minimum tilt angle in radians from the zenith, or the ellipsoid surface normal, at the tilt origin at which the camera can orbit.
Default Value: CesiumMath.toRadians(5)

orbitAnimationDuration : number
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 158

Specifies the length of time in seconds in which a single orbit animation completes.
Default Value: 0.0045

orbitEnabled : boolean
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 82

Enabled dragging to orbit the camera.
Default Value: true

orbitMagnitude : number
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 151

The amount at which the camera orbits per dragged pixel. A value of 1.0 means that dragging the mouse across the entire canvas will orbit the camera by 180 degrees.
Default Value: 2.0

tiltAnimationDuration : number
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 123

Specifies the length of time in seconds in which a single tilt animation completes.
Default Value: 0.0045

tiltEnabled : boolean
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 75

Enabled dragging to tilt the camera.
Default Value: true

tiltMagnitude : number
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 116

The amount at which the camera tilts per dragged pixel. A value of 1.0 means that dragging the mouse across the entire canvas will tilt the camera by 90 degrees.
Default Value: 2.0

useDragPosition : boolean
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 89

If false, the camera will orbit and tilt around the position at the center of the screen. If true, the camera will orbit and tilt around the position under the cursor or tap when dragging starts.
Default Value: false

Methods

connectedCallback(element)
engine/Source/Scene/Controllers/Controller.js 30

Invoked when the controller is added to the DOM. Implement connectedCallback to set up any DOM event listeners.
Name Type Description
element HTMLElement The DOM element containing the Cesium scene.

disconnectedCallback(element)
engine/Source/Scene/Controllers/Controller.js 38

Invoked when the controller is removed from the DOM. Implement disconnectedCallback to tear down any DOM event listeners.
Name Type Description
element HTMLElement The DOM element containing the Cesium scene.

firstUpdate(scene, time)
engine/Source/Scene/Controllers/Controller.js 58

Invoked when the controller is being updated the first time, immediately before update is called. Implement firstUpdate to perform one-time work after the relevant scene has begun its render loop. Some examples might include initializing simulation time values or adding a primitive to the scene.
Name Type Description
scene Scene
time JulianDate The current simulation time.
See:

orbit(camera, target, axis, amount, dt, ellipsoid)
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 371

Attempts to orbit the camera around the specified origin by the specified amount in radians. Positive values orbit the camera clockwise, negative values orbit the camera counterclockwise. If the drag origin is not on the ellipsoid, no orbit is applied.
Name Type Default Description
camera Camera The camera to orbit.
target Cartesian3 The origin position to orbit around in world coordinates.
axis Cartesian3 The axis to orbit around, typically the negative of the surface normal at the target position.
amount number The amount to orbit the camera in radians. Positive values orbit the camera clockwise, negative values orbit the camera counterclockwise.
dt number The time delta in seconds since the last update.
ellipsoid Ellipsoid Ellipsoid.default optional The ellipsoid to pick for the orbit origin. If undefined, the default ellipsoid is used.

tilt(camera, target, axis, amount, dt, ellipsoid)
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 477

Attempts to tilt the camera by the specified amount in radians. Positive values tilt the camera down, negative values tilt the camera up. If the drag origin is not on the ellipsoid, no tilt is applied.
Name Type Default Description
camera Camera The camera to tilt.
target Cartesian3 The origin position to tilt around in world coordinates.
axis Cartesian3 The axis to tilt around, typically the negative of the surface normal at the target position.
amount number The amount to tilt the camera in radians. Positive values tilt the camera down, negative values tilt the camera up.
dt number The time delta in seconds since the last update. Value must be greater than 0.
ellipsoid Ellipsoid Ellipsoid.default optional The ellipsoid to pick for the tilt origin. If undefined, the default ellipsoid is used.

update(scene, time)
engine/Source/Scene/Controllers/Controller.js 48

Invoked once per frame. Implement update to modify the camera or other parts of the scene.
Name Type Description
scene Scene
time JulianDate The current simulation time.
See:

Type Definitions

Cesium.ScreenSpaceTiltOrbitCameraController.ControllerOptions
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 19

Properties:
Name Type Attributes Description
dragInputs Array.<ScreenSpaceInputBindings.InputBinding> <optional>
 The drag input bindings that control tilting and orbiting.

Cesium.ScreenSpaceTiltOrbitCameraController.DragEvent
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 288

Properties:
Name Type Description
startPosition Cartesian2 The position of the mouse when the drag started.
endPosition Cartesian2 The position of the mouse when the drag ended.

Cesium.ScreenSpaceTiltOrbitCameraController.StartDragEvent
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 261

Properties:
Name Type Description
position Cartesian2 The position of the mouse when the drag started.
Need help? The fastest way to get answers is from the community and team on the Cesium Forum.
CtrlK
packages/engine
packages/widgets