## aframe-orbit-controls
[](https://npmjs.org/package/aframe-orbit-controls-component)
[](https://npmjs.org/package/aframe-orbit-controls-component)
Orbit controls for [A-Frame](https://aframe.io).
Automatically toggles `look-controls` on and off when entering and exiting VR.
Great for using as a viewer, better and easier than using WASD + mouse-drag,
or being stuck in the same position on mobile.
The other A-Frame orbit controls components were weird since they fully ported
the `THREE.OrbitControls` logic into a component. This component just straight
up uses `THREE.OrbitControls` in a clean and performant way.
### API
Same API as
[`THREE.OrbitControls`](https://threejs.org/docs/#examples/controls/OrbitControls),
supports all the properties.
| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| autoRotate | Set to true to automatically rotate around the target. | false |
| autoRotateSpeed | How fast to rotate around the target. | 2 (30 seconds per rotation at 60fps) |
| cursor | The 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`. | 0 0 0 |
| dampingFactor | Damping inertia if `enableDamping`. | 0.1 |
| enabled | Whether enabled. You can also call `.pause()` on the entity. | true |
| enableDamping | Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. | true |
| enablePan | Enable panning (i.e., right click drag or three finger drag). | true |
| enableRotate | Enable rotation (i.e., left click drag or single finger drag). Use Azimuth angles to constrain to single axis. | true |
| enableZoom | Enable zoom (i.e., scroll or pinch). | true |
| initialPosition | Initial position of the camera. Set this rather than `position`. | 0 0 0 |
| keyPanSpeed | How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress. | 7 (pixels per keypress) |
| minAzimuthAngle | How far you can orbit horizontally, lower limit. From -180 to 180 degrees. | Infinity (no limit) |
| maxAzimuthAngle | How far you can orbit horizontally, upper limit. From -180 to 180 degrees. | Infinity (no limit) |
| maxDistance | How far you can dolly out. | Infinity |
| maxPolarAngle | How far you can orbit vertically, upper limit. Range is 0 to 180 degrees. | 90 |
| minDistance | How far you can dolly in. | 0 |
| minPolarAngle | How far you can orbit vertically, lower limit. Range is 0 to 180 degrees. | 0 |
| minTargetRadius | How close you can get the target to the 3D `cursor`. | 0 |
| maxTargetRadius | How far you can move the target from the 3D `cursor`. | Infinity (no limit) |
| minZoom | How far you can zoom in (OrthographicCamera only). | 0 |
| maxZoom | How far you can zoom out (OrthographicCamera only). | Infinity (no limit) |
| panSpeed | Speed of panning. | 1 |
| rotateSpeed | Speed of rotation. | 1 |
| screenSpacePanning | 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. | false |
| target | Focus point of controls. look-at vector. | 0 0 0 |
| zoomSpeed | Speed of zooming / dollying. | 1 |
| zoomToCursor | Setting this property to true allows to zoom to the cursor's position. | false |
### Installation
#### Browser
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
```
#### npm
Install via npm:
```bash
npm install aframe-orbit-controls
```
Then require and use.
```js
require('aframe');
require('aframe-orbit-controls');
```