Capítulo 312 de 859

Chapter 312: OrbitControls

Core Idea

Orbit controls allow the camera to orbit around a target.

OrbitControls performs orbiting, dollying (zooming), and panning. Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).

  • Orbit: Left mouse / touch: one-finger move.
  • Zoom: Middle mouse, or mousewheel / touch: two-finger spread or squish.
  • Pan: Right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move.

Key Concepts

  • autoRotate : boolean: Set to true to automatically rotate around the target
  • autoRotateSpeed : number: How fast to rotate around the target if autoRotate is true. The default equates to 30 seconds per orbit at 60fps.
  • cursor : Vector3: The focus point of the minTargetRadius and maxTargetRadius limits. It can be updated manually at any point to change the center of inte…
  • cursorStyle : 'auto' | 'grab': Defines the visual representation of the cursor.
  • dampingFactor : number: The damping inertia used if enableDamping is set to true.
  • enableDamping : boolean: Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Note that if this is enabled, you m…
  • enablePan : boolean: Enable or disable camera panning.
  • enableRotate : boolean: Enable or disable horizontal and vertical rotation of the camera.
  • enableZoom : boolean: Enable or disable zooming (dollying) of the camera.
  • keyPanSpeed : number: How fast to pan the camera when the keyboard is used in pixels per keypress.

Code Examples

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() {
	// required if controls.enableDamping or controls.autoRotate are set to true
	controls.update();
	renderer.render( scene, camera );
}
  • What it demonstrates: Typical usage of OrbitControls.

Reference Tables

Constructor

Signature
new OrbitControls( object : Object3D, domElement : HTMLElement )

Properties

PropertyDescription
.autoRotate : booleanSet to true to automatically rotate around the target
.autoRotateSpeed : numberHow fast to rotate around the target if autoRotate is true. The default equates to 30 seconds per orbit at 60fps.
.cursor : Vector3The focus point of the minTargetRadius and maxTargetRadius limits. It can be updated manually at any point to change the center of interest for the target.
`.cursorStyle : 'auto''grab'`
.dampingFactor : numberThe damping inertia used if enableDamping is set to true.
.enableDamping : booleanSet to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Note that if this is enabled, you must call update() in your animation loop.
.enablePan : booleanEnable or disable camera panning.
.enableRotate : booleanEnable or disable horizontal and vertical rotation of the camera.
.enableZoom : booleanEnable or disable zooming (dollying) of the camera.
.keyPanSpeed : numberHow fast to pan the camera when the keyboard is used in pixels per keypress.
.keyRotateSpeed : numberHow fast to rotate the camera when the keyboard is used.
.keys : ObjectThis object contains references to the keycodes for controlling camera panning.
.maxAzimuthAngle : numberHow 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 ).
.maxDistance : numberHow far you can dolly out (perspective camera only).
.maxPolarAngle : numberHow far you can orbit vertically, upper limit. Range is [0, Math.PI] radians.
.maxTargetRadius : numberHow far you can move the target from the 3D cursor.
.maxZoom : numberHow far you can zoom out (orthographic camera only).
.minAzimuthAngle : numberHow 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 ).
.minDistance : numberHow far you can dolly in (perspective camera only).
.minPolarAngle : numberHow far you can orbit vertically, lower limit. Range is [0, Math.PI] radians.
.minTargetRadius : numberHow close you can get the target to the 3D cursor.
.minZoom : numberHow far you can zoom in (orthographic camera only).
.mouseButtons : ObjectThis object contains references to the mouse actions used by the controls.
.panSpeed : numberSpeed of panning.
.position0 : Vector3Used internally by saveState() and reset().
.rotateSpeed : numberSpeed of rotation.
.screenSpacePanning : booleanDefines 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.
.target : Vector3The focus point of the controls, the object orbits around this. It can be updated manually at any point to change the focus of the controls.
.target0 : Vector3Used internally by saveState() and reset().
.touches : ObjectThis object contains references to the touch actions used by the controls.
.zoom0 : numberUsed internally by saveState() and reset().
.zoomSpeed : numberSpeed of zooming / dollying.
.zoomToCursor : booleanSetting this property to true allows to zoom to the cursor's position.

Methods

MethodDescription
.dollyIn( dollyScale : number )Programmatically dolly in (zoom in for perspective camera).
.dollyOut( dollyScale : number )Programmatically dolly out (zoom out for perspective camera).
.getAzimuthalAngle() : numberGet the current horizontal rotation, in radians.
.getDistance() : numberReturns the distance from the camera to the target.
.getPolarAngle() : numberGet the current vertical rotation, in radians.
.listenToKeyEvents( domElement : HTMLElement )Adds key event listeners to the given DOM element. window is a recommended argument for using this method.
.pan( deltaX : number, deltaY : number )Programmatically pan the camera.
.reset()Reset the controls to their state from either the last time the saveState() was called, or the initial state.
.rotateLeft( angle : number )Programmatically rotate the camera left (around the vertical axis).
.rotateUp( angle : number )Programmatically rotate the camera up (around the horizontal axis).
.saveState()Save the current state of the controls. This can later be recovered with reset().
.stopListenToKeyEvents()Removes the key event listener previously defined with listenToKeyEvents().

Key Takeaways

  1. OrbitControls extends: EventDispatcher → Controls
  2. Most relevant properties: autoRotate, autoRotateSpeed, cursor, cursorStyle.
  3. Key methods: dollyIn, dollyOut, getAzimuthalAngle, getDistance.

Connects To