[page:EventDispatcher] →

# [name]

[name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector. That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up".

## Import

[name] is an add-on, and must be imported explicitly. See [link:#manual/introduction/Installation Installation / Addons].

`import { TrackballControls } from 'three/addons/controls/TrackballControls.js';`

## Examples

[example:misc_controls_trackball misc / controls / trackball ]

## Constructor

### [name]( [param:Camera camera], [param:HTMLDOMElement domElement] )

[page:Camera camera]: The camera of the rendered scene.

[page:HTMLDOMElement domElement]: The HTML element used for event listeners.

Creates a new instance of [name].

## Events

### change

Fires when the camera has been transformed by the controls.

### start

Fires when an interaction (e.g. touch) was initiated.

### end

Fires when an interaction has finished.

## Properties

### [property:HTMLDOMElement domElement]

The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will not set up new event listeners.

### [property:Number dynamicDampingFactor]

Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to `false`. Default is `0.2`.

### [property:Boolean enabled]

Whether or not the controls are enabled.

### [property:Array keys]

This array holds keycodes for controlling interactions.

- When the first defined key is pressed, all mouse interactions (left, middle, right) performs orbiting.
- When the second defined key is pressed, all mouse interactions (left, middle, right) performs zooming.
- When the third defined key is pressed, all mouse interactions (left, middle, right) performs panning.

Default is *KeyA, KeyS, KeyD* which represents A, S, D.

### [property:Number maxDistance]

How far you can dolly out ( [page:PerspectiveCamera] only ). Default is `Infinity`.

### [property:Number minDistance]

How far you can dolly in ( [page:PerspectiveCamera] only ). Default is *0*.

### [property:Float maxZoom]

How far you can zoom out ( [page:OrthographicCamera] only ). Default is `Infinity`.

### [property:Float minZoom]

How far you can zoom in ( [page:OrthographicCamera] only ). Default is *0*.

### [property:Object mouseButtons]

This object contains references to the mouse actions used by the controls.

- .LEFT is assigned with `THREE.MOUSE.ROTATE`
- .MIDDLE is assigned with `THREE.MOUSE.ZOOM`
- .RIGHT is assigned with `THREE.MOUSE.PAN`

### [property:Boolean noPan]

Whether or not panning is disabled. Default is `false`.

### [property:Boolean noRotate]

Whether or not rotation is disabled. Default is `false`.

### [property:Boolean noZoom]

Whether or not zooming is disabled. Default is `false`.

### [property:Camera object]

The camera being controlled.

### [property:Number panSpeed]

The pan speed. Default is `0.3`.

### [property:Number rotateSpeed]

The rotation speed. Default is `1.0`.

### [property:Object screen]

Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called.

- left: Represents the offset in pixels to the screen's left boundary.
- top: Represents the offset in pixels to the screen's top boundary.
- width: Represents the screen width in pixels.
- height: Represents the screen height in pixels.

### [property:Boolean staticMoving]

Whether or not damping is disabled. Default is `false`.

### [property:Vector3 target]

The focus point of the controls.

### [property:Number zoomSpeed]

The zoom speed. Default is `1.2`.

## Methods

### [method:undefined checkDistances] ()

Ensures the controls stay in the range [minDistance, maxDistance]. Called by [page:.update update]().

### [method:undefined dispose] ()

Should be called if the controls is no longer required.

### [method:undefined handleResize] ()

Should be called if the application window is resized.

### [method:undefined panCamera] ()

Performs panning if necessary. Called by [page:.update update]().

### [method:undefined reset] ()

Resets the controls to its initial state.

### [method:undefined rotateCamera] ()

Rotates the camera if necessary. Called by [page:.update update]().

### [method:undefined update] ()

Updates the controls. Usually called in the animation loop.

### [method:undefined zoomCamera] ()

Performs zooming if necessary. Called by [page:.update update]().

## Source

[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/TrackballControls.js examples/jsm/controls/TrackballControls.js]