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 seperately in your HTML.
[example:misc_controls_orbit misc / controls / orbit ]
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
var controls = new THREE.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 );
}
[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.
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 [property:Boolean autoRotate] is true. Default is 2.0, which equates to 30 seconds
per rotation at 60fps.
Note that if [property:Boolean autoRotate] is enabled, you must call [page:.update]
() in your animation loop.
The damping inertia used if [property:Boolean enableDamping] is set to true.
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.
Whether or not the controls are enabled.
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 the use of keyboard controls.
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: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
}
See [link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page] for a full
list of keycodes.
How far you can orbit horizontally, upper limit. Range is - Math.PI to Math.PI ( or Infinity for no limit ) and 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. Range is - Math.PI to Math.PI ( or - Infinity for no limit ) and 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 [method:saveState] and [method: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 false.
Used internally by the [method:saveState] and [method: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 [method:saveState] and [method: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.
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/js/controls/OrbitControls.js examples/js/controls/OrbitControls.js]