ThreeJS what is OrbitControl

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.

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innderHeight);

document.body.appendChild(renderer.domElement);

var scene = new THREE.scene();

var camera = new THREE.perspectiveCamera(45, window.innerWidth, window.innerHeight, 1, 10000);

var orbitControls = new OrbitControls(camera, renderer.domElement);

camera.position.set(0,20,100);

controls.update();

function animate(){

requestAnimationFrame(true);

controls.update();

Renderer.render(scene,camera);

}

The constructor accepts multiple parameters 

Camera is The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.

The domElement is The HTML element used for event listener 

There are multiple properties such as 

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

.autoRotateSpeed : How fast to rotate around the target if .autoRotate : Booleanis true. Default is 2.0, which equates to 30 seconds per rotation at 60fps.

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

.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.

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

.enableDamping : 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 .update () in your animation loop.

.enableKeys : Enable or disable the use of keyboard controls.

.enablePan: Enable or disable camera panning. Default is true.

.enableRotate: 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 polar angle or azimuth angle to the same value, which will cause the vertical or horizontal rotation to be fixed at that value.

.enableZoom : Enable or disable zooming (dollying) of the camera.

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

.keys : 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

}

.maxAzimuthAngle: 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 : How far you can dolly out ( PerspectiveCamera only ). Default is Infinity.

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

.maxZoom : How far you can zoom out ( OrthographicCamera only ). Default is Infinity.

.minAzimuthAngle : 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: How far you can dolly in ( PerspectiveCamera only ). Default is 0

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

.minZoom: How far you can zoom in ( OrthographicCamera only ). Default is 0.

.mouseButtons: 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

}

.panSpeed : Float

Speed of panning. Default is 1.

.position0 : Vector3

Used internally by the .saveState : saveStateand .reset : resetmethods.

.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 .saveState : saveStateand .reset : resetmethods.

.target : Vector3

The 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.

.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 .saveState : saveStateand .reset : resetmethods.

.zoomSpeed : Float

Speed of zooming / dollying. Default is 1.

Below are the functions: 

.dispose () Remove all the event listeners. 

.getAzimuthalAngle () : Get the current horizontal rotation, in radians.

.getPolarAngle (): Get the current vertical rotation, in radians.

.reset () : Reset the controls to their state from either the last time the .saveState was called, or the initial state.

.saveState : Save the current state of the controls. This can later be recovered with .reset.

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

References:

https://threejs.org/docs/#examples/en/controls/OrbitControls