[name]

Orbit controls allow the camera to orbit around a target.
To use this, as with all files in the /examples directory, you will have to include the file separately in your HTML.

Code Example

const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); const controls = new OrbitControls( camera, renderer.domElement ); //controls.update() must be called after any manual changes to the camera's transform camera.position.set( 0, 20, 100 ); controls.update(); function animate() { requestAnimationFrame( animate ); // required if controls.enableDamping or controls.autoRotate are set to true controls.update(); renderer.render( scene, camera ); }

Examples

[example:misc_controls_orbit misc / controls / orbit ]

Constructor

[name]( [param:Camera object], [param:HTMLDOMElement domElement] )

[page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.

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

Events

change

Fires when the camera has been transformed by the controls.

start

Fires when an interaction was initiated.

end

Fires when an interaction has finished.

Properties

.autoRotate : Boolean

Set to true to automatically rotate around the target.
Note that if this is enabled, you must call [page:.update] () in your animation loop.

.autoRotateSpeed : Float

How fast to rotate around the target if [page:.autoRotate] is true. Default is 2.0, which equates to 30 seconds per orbit at 60fps.
Note that if [page:.autoRotate] is enabled, you must call [page:.update] () in your animation loop.

.dampingFactor : Float

The damping inertia used if [page:.enableDamping] is set to true.
Note that for this to work, you must call [page:.update] () in your animation loop.

.domElement : HTMLDOMElement

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.

.enabled : Boolean

When set to `false`, the controls will not respond to user input. Default is `true`.

.enableDamping : Boolean

Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Default is false.
Note that if this is enabled, you must call [page:.update] () in your animation loop.

.enablePan : Boolean

Enable or disable camera panning. Default is true.

.enableRotate : Boolean

Enable or disable horizontal and vertical rotation of the camera. Default is true.
Note that it is possible to disable a single axis by setting the min and max of the [page:.minPolarAngle polar angle] or [page:.minAzimuthAngle azimuth angle] to the same value, which will cause the vertical or horizontal rotation to be fixed at that value.

.enableZoom : Boolean

Enable or disable zooming (dollying) of the camera.

.keyPanSpeed : Float

How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.

.keys : Object

This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys. controls.keys = { LEFT: 'ArrowLeft', //left arrow UP: 'ArrowUp', // up arrow RIGHT: 'ArrowRight', // right arrow BOTTOM: 'ArrowDown' // down arrow } See [link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code KeyboardEvent.code] for a full list of keycodes.

.maxAzimuthAngle : Float

How far you can orbit horizontally, upper limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.

.maxDistance : Float

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

.maxPolarAngle : Float

How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.

.maxZoom : Float

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

.minAzimuthAngle : Float

How far you can orbit horizontally, lower limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.

.minDistance : Float

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

.minPolarAngle : Float

How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.

.minZoom : Float

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

.mouseButtons : Object

This object contains references to the mouse actions used by the controls. controls.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN }

.object : Camera

The camera being controlled.

.panSpeed : Float

Speed of panning. Default is 1.

.position0 : Vector3

Used internally by the [page:.saveState] and [page:.reset] methods.

.rotateSpeed : Float

Speed of rotation. Default is 1.

.screenSpacePanning : Boolean

Defines how the camera's position is translated when panning. If true, the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction. Default is true for OrbitControls; false for MapControls.

.target0 : Vector3

Used internally by the [page:.saveState] and [page:.reset] methods.

.target : Vector3

The focus point of the controls, the [page:.object] orbits around this. It can be updated manually at any point to change the focus of the controls.

.touches : Object

This object contains references to the touch actions used by the controls. controls.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN }

.zoom0 : Float

Used internally by the [page:.saveState] and [page:.reset] methods.

.zoomSpeed : Float

Speed of zooming / dollying. Default is 1.

Methods

.dispose () : undefined

Remove all the event listeners.

.getAzimuthalAngle () : radians

Get the current horizontal rotation, in radians.

.getPolarAngle () : radians

Get the current vertical rotation, in radians.

.getDistance () : Float

Returns the distance from the camera to the target.

.listenToKeyEvents ( [param:HTMLDOMElement domElement] ) : undefined

Adds key event listeners to the given DOM element. `window` is a recommended argument for using this method.

.reset () : undefined

Reset the controls to their state from either the last time the [page:.saveState] was called, or the initial state.

.saveState () : undefined

Save the current state of the controls. This can later be recovered with [page:.reset].

.update () : Boolean

Update the controls. Must be called after any manual changes to the camera's transform, or in the update loop if [page:.autoRotate] or [page:.enableDamping] are set.

Source

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

OrbitControls OrbitControls OrbitControls OrbitControls

OrbitControls OrbitControls OrbitControls OrbitControls