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 53

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);
// Tilt around the position under the cursor or tap when dragging starts instead of the position at the center of the screen.
viewer.scene.screenSpaceCameraController.enableInputs = false;
viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;

const tiltOrbitController = new Cesium.ScreenSpaceTiltOrbitCameraController();
tiltOrbitController.useDragPosition = true;
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

dampingEnabled : boolean
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 145

Enables or disables damping for tilt and orbit animations. Damping smooths out the camera movement and makes it feel more natural or weighty, but it can also introduce a slight delay in the camera response. If damping is disabled, the camera will respond immediately to user input.
Default Value: true

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

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 223

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 187

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 159

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

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

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 91

Enabled dragging to orbit the camera.
Default Value: true

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

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

pickWorldPosition : function
engine/Source/Scene/Controllers/ScreenSpaceTiltOrbitCameraController.js 127

A callback function used to pick the world position around which to tilt or orbit. The function is called with Scene, the Cartesian2 screen space position, and a Cartesian3 instance to store the result. The function should return the Cartesian3 world position from which to tilt or orbit, or undefined if no position could be picked.
Default Value: defaultPickWorldPosition
Example:
const tiltOrbitCameraController = new Cesium.ScreenSpaceTiltOrbitCameraController();
tiltOrbitCameraController.pickWorldPosition = function (scene, windowPosition, result) {
  // Pick the world position from the depth buffer
  return scene.pickPosition(windowPosition, result);
};
viewer.addController(tiltOrbitCameraController);

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

Specifies the length of time in seconds in which a single tilt animation is targeted to complete.
Default Value: 0.0045

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

Enabled dragging to tilt the camera.
Default Value: true

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

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 98

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 376

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 483

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 20

Properties:
Name Type Attributes Description
dragInputs Array.<ScreenSpaceInputBindings.InputBinding> <optional>
 The drag input bindings that control tilting and orbiting.
Need help? The fastest way to get answers is from the community and team on the Cesium Forum.
CtrlK
packages/engine
packages/widgets