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.
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 );
}
[example:misc_controls_orbit misc / controls / orbit ]
[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.
Fires when the camera has been transformed by the controls.
Fires when an interaction was initiated.
Fires when an interaction has finished.
Set to true to automatically rotate around the target.
Note that if this is enabled, you must call [page:.update]
() in your animation loop.
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.
The damping inertia used if [page:.enableDamping] is set to `true`. Default is `0.05`.
Note that for this to work, you must
call [page:.update] () in your animation loop.
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.
When set to `false`, the controls will not respond to user input. Default is `true`.
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.
Enable or disable camera panning. Default is true.
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.
Enable or disable zooming (dollying) of the camera.
How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
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.
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.
How far you can dolly out ( [page:PerspectiveCamera] only ). Default is Infinity.
How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.
How far you can zoom out ( [page:OrthographicCamera] only ). Default is Infinity.
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.
How far you can dolly in ( [page:PerspectiveCamera] only ). Default is 0.
How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.
How far you can zoom in ( [page:OrthographicCamera] only ). Default is 0.
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
}
The camera being controlled.
Speed of panning. Default is 1.
Used internally by the [page:.saveState] and [page:.reset] methods.
Speed of rotation. Default is 1.
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.
Used internally by the [page:.saveState] and [page:.reset] methods.
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.
This object contains references to the touch actions used by the controls.
controls.touches = {
ONE: THREE.TOUCH.ROTATE,
TWO: THREE.TOUCH.DOLLY_PAN
}
Used internally by the [page:.saveState] and [page:.reset] methods.
Speed of zooming / dollying. Default is 1.
Remove all the event listeners.
Get the current horizontal rotation, in radians.
Get the current vertical rotation, in radians.
Returns the distance from the camera to the target.
Adds key event listeners to the given DOM element. `window` is a recommended argument for using this method.
Reset the controls to their state from either the last time the [page:.saveState] was called, or the initial state.
Save the current state of the controls. This can later be recovered with [page:.reset].
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.
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js examples/jsm/controls/OrbitControls.js]