Class CameraControls

Hierarchy

EventDispatcher
- CameraControls

Index

Statics

`Static`install

install(libs: { THREE: THREESubset }): void

Injects THREE as the dependency. You can then proceed to use CameraControls.

e.g

CameraControls.install( { THREE: THREE } );

Note: If you do not wish to use enter three.js to reduce file size(tree-shaking for example), make a subset to install.

import {
	Vector2,
	Vector3,
	Vector4,
	Quaternion,
	Matrix4,
	Spherical,
	Box3,
	Sphere,
	Raycaster,
	MathUtils,
} from 'three';

const subsetOfTHREE = {
	Vector2   : Vector2,
	Vector3   : Vector3,
	Vector4   : Vector4,
	Quaternion: Quaternion,
	Matrix4   : Matrix4,
	Spherical : Spherical,
	Box3      : Box3,
	Sphere    : Sphere,
	Raycaster : Raycaster,
};

CameraControls.install( { THREE: subsetOfTHREE } );

Parameters

libs: { THREE: THREESubset }

Returns void

`Static`ACTION

get ACTION(): Readonly<
    {
        NONE: 0;
        ROTATE: 1;
        TRUCK: 2;
        SCREEN_PAN: 4;
        OFFSET: 8;
        DOLLY: 16;
        ZOOM: 32;
        TOUCH_ROTATE: 64;
        TOUCH_TRUCK: 128;
        TOUCH_SCREEN_PAN: 256;
        TOUCH_OFFSET: 512;
        TOUCH_DOLLY: 1024;
        TOUCH_ZOOM: 2048;
        TOUCH_DOLLY_TRUCK: 4096;
        TOUCH_DOLLY_SCREEN_PAN: 8192;
        TOUCH_DOLLY_OFFSET: 16384;
        TOUCH_DOLLY_ROTATE: 32768;
        TOUCH_ZOOM_TRUCK: 65536;
        TOUCH_ZOOM_OFFSET: 131072;
        TOUCH_ZOOM_SCREEN_PAN: 262144;
        TOUCH_ZOOM_ROTATE: 524288;
    },
>
list all ACTIONs

Returns Readonly<
    {
        NONE: 0;
        ROTATE: 1;
        TRUCK: 2;
        SCREEN_PAN: 4;
        OFFSET: 8;
        DOLLY: 16;
        ZOOM: 32;
        TOUCH_ROTATE: 64;
        TOUCH_TRUCK: 128;
        TOUCH_SCREEN_PAN: 256;
        TOUCH_OFFSET: 512;
        TOUCH_DOLLY: 1024;
        TOUCH_ZOOM: 2048;
        TOUCH_DOLLY_TRUCK: 4096;
        TOUCH_DOLLY_SCREEN_PAN: 8192;
        TOUCH_DOLLY_OFFSET: 16384;
        TOUCH_DOLLY_ROTATE: 32768;
        TOUCH_ZOOM_TRUCK: 65536;
        TOUCH_ZOOM_OFFSET: 131072;
        TOUCH_ZOOM_SCREEN_PAN: 262144;
        TOUCH_ZOOM_ROTATE: 524288;
    },
>
- Defined in CameraControls.ts:138

Constructor

constructor

new CameraControls(
camera: PerspectiveCamera | OrthographicCamera,
domElement?: HTMLElement,
): CameraControls
Creates a CameraControls instance.

Note:
You must install three.js before using camera-controls. see #install
Not doing so will lead to runtime errors (undefined references to THREE).

e.g.
```
CameraControls.install( { THREE } );
const cameraControls = new CameraControls( camera, domElement );
```
Parameters
- camera: PerspectiveCamera | OrthographicCamera
  A THREE.PerspectiveCamera or THREE.OrthographicCamera to be controlled.
- OptionaldomElement: HTMLElement
  A HTMLElement for the draggable area, usually renderer.domElement.
Returns CameraControls
Overrides EventDispatcher.constructor
- Defined in CameraControls.ts:463

Properties

minPolarAngle

minPolarAngle: number = 0

Minimum vertical angle in radians.
The angle has to be between 0 and .maxPolarAngle inclusive.
The default value is 0.

e.g.

cameraControls.maxPolarAngle = 0;

maxPolarAngle

maxPolarAngle: number = Math.PI

Maximum vertical angle in radians.
The angle has to be between .maxPolarAngle and Math.PI inclusive.
The default value is Math.PI.

e.g.

cameraControls.maxPolarAngle = Math.PI;

minAzimuthAngle

minAzimuthAngle: number = - Infinity

Minimum horizontal angle in radians.
The angle has to be less than .maxAzimuthAngle.
The default value is - Infinity.

e.g.

cameraControls.minAzimuthAngle = - Infinity;

maxAzimuthAngle

maxAzimuthAngle: number = Infinity

Maximum horizontal angle in radians.
The angle has to be greater than .minAzimuthAngle.
The default value is Infinity.

e.g.

cameraControls.maxAzimuthAngle = Infinity;

minDistance

minDistance: number = Number.EPSILON

Minimum distance for dolly. The value must be higher than 0. Default is Number.EPSILON.
PerspectiveCamera only.

maxDistance

maxDistance: number = Infinity

Maximum distance for dolly. The value must be higher than minDistance. Default is Infinity.
PerspectiveCamera only.

infinityDolly

infinityDolly: boolean = false

true to enable Infinity Dolly for wheel and pinch. Use this with minDistance and maxDistance
If the Dolly distance is less (or over) than the minDistance (or maxDistance), infinityDolly will keep the distance and pushes the target position instead.

minZoom

minZoom: number = 0.01

Minimum camera zoom.

maxZoom

maxZoom: number = Infinity

Maximum camera zoom.

smoothTime

smoothTime: number = 0.25

Approximate time in seconds to reach the target. A smaller value will reach the target faster.

draggingSmoothTime

draggingSmoothTime: number = 0.125

the smoothTime while dragging

maxSpeed

maxSpeed: number = Infinity

Max transition speed in unit-per-seconds

azimuthRotateSpeed

azimuthRotateSpeed: number = 1.0

Speed of azimuth (horizontal) rotation.

polarRotateSpeed

polarRotateSpeed: number = 1.0

Speed of polar (vertical) rotation.

dollySpeed

dollySpeed: number = 1.0

Speed of mouse-wheel dollying.

dollyDragInverted

dollyDragInverted: boolean = false

true to invert direction when dollying or zooming via drag

truckSpeed

truckSpeed: number = 2.0

Speed of drag for truck and pedestal.

dollyToCursor

dollyToCursor: boolean = false

true to enable Dolly-in to the mouse cursor coords.

dragToOffset

dragToOffset: boolean = false

boundaryFriction

boundaryFriction: number = 0.0

Friction ratio of the boundary.

restThreshold

restThreshold: number = 0.01

Controls how soon the rest event fires as the camera slows.

colliderMeshes

colliderMeshes: Object3D<Object3DEventMap>[] = []

An array of Meshes to collide with camera.
Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners.

mouseButtons

mouseButtons: MouseButtons

User's mouse input config.

button to assign	behavior
`mouseButtons.left`	`CameraControls.ACTION.ROTATE`* \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE`
`mouseButtons.right`	`CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK`* \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE`
`mouseButtons.wheel` ¹	`CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY` \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE`
`mouseButtons.middle` ²	`CameraControls.ACTION.ROTATE` \| `CameraControls.ACTION.TRUCK` \| `CameraControls.ACTION.OFFSET` \| `CameraControls.ACTION.DOLLY`* \| `CameraControls.ACTION.ZOOM` \| `CameraControls.ACTION.NONE`

Mouse wheel event for scroll "up/down" on mac "up/down/left/right"
Mouse click on wheel event "button"

* is the default.
The default of mouseButtons.wheel is:
- DOLLY for Perspective camera.
- ZOOM for Orthographic camera, and can't set DOLLY.

touches

touches: Touches

User's touch input config.

fingers to assign	behavior
`touches.one`	`CameraControls.ACTION.TOUCH_ROTATE`* \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.DOLLY`
`touches.two`	`ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_DOLLY_OFFSET` \| `ACTION.TOUCH_DOLLY_ROTATE` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_ZOOM_OFFSET` \| `ACTION.TOUCH_ZOOM_ROTATE` \| `ACTION.TOUCH_DOLLY` \| `ACTION.TOUCH_ZOOM` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.NONE`
`touches.three`	`ACTION.TOUCH_DOLLY_TRUCK` \| `ACTION.TOUCH_DOLLY_OFFSET` \| `ACTION.TOUCH_DOLLY_ROTATE` \| `ACTION.TOUCH_ZOOM_TRUCK` \| `ACTION.TOUCH_ZOOM_OFFSET` \| `ACTION.TOUCH_ZOOM_ROTATE` \| `CameraControls.ACTION.TOUCH_ROTATE` \| `CameraControls.ACTION.TOUCH_TRUCK` \| `CameraControls.ACTION.TOUCH_OFFSET` \| `CameraControls.ACTION.NONE`

* is the default.
The default of touches.two and touches.three is:
- TOUCH_DOLLY_TRUCK for Perspective camera.
- TOUCH_ZOOM_TRUCK for Orthographic camera, and can't set TOUCH_DOLLY_TRUCK and TOUCH_DOLLY.

camera

get camera(): PerspectiveCamera | OrthographicCamera
The camera to be controlled

Returns PerspectiveCamera | OrthographicCamera
- Defined in CameraControls.ts:1301
set camera(camera: PerspectiveCamera | OrthographicCamera): void
Parameters
- camera: PerspectiveCamera | OrthographicCamera
Returns void
- Defined in CameraControls.ts:1307

enabled

get enabled(): boolean
Whether or not the controls are enabled.
false to disable user dragging/touch-move, but all methods works.

Returns boolean
- Defined in CameraControls.ts:1322
set enabled(enabled: boolean): void
Parameters
- enabled: boolean
Returns void
- Defined in CameraControls.ts:1328

active

get active(): boolean
Returns true if the controls are active updating.
readonly value.

Returns boolean
- Defined in CameraControls.ts:1355

currentAction

get currentAction(): number
Getter for the current ACTION.
readonly value.

Returns number
- Defined in CameraControls.ts:1366

distance

get distance(): number
get/set Current distance.

Returns number
- Defined in CameraControls.ts:1376
set distance(distance: number): void
Parameters
- distance: number
Returns void
- Defined in CameraControls.ts:1382

azimuthAngle

get azimuthAngle(): number
get/set the azimuth angle (horizontal) in radians.
Every 360 degrees turn is added to .azimuthAngle value, which is accumulative.

Returns number
- Defined in CameraControls.ts:1401
set azimuthAngle(azimuthAngle: number): void
Parameters
- azimuthAngle: number
Returns void
- Defined in CameraControls.ts:1407

polarAngle

get polarAngle(): number
get/set the polar angle (vertical) in radians.

Returns number
- Defined in CameraControls.ts:1425
set polarAngle(polarAngle: number): void
Parameters
- polarAngle: number
Returns void
- Defined in CameraControls.ts:1431

boundaryEnclosesCamera

get boundaryEnclosesCamera(): boolean
Whether camera position should be enclosed in the boundary or not.

Returns boolean
- Defined in CameraControls.ts:1448
set boundaryEnclosesCamera(boundaryEnclosesCamera: boolean): void
Parameters
- boundaryEnclosesCamera: boolean
Returns void
- Defined in CameraControls.ts:1454

interactiveArea

set interactiveArea(
    interactiveArea:
        | DOMRect
        | { x: number; y: number; width: number; height: number },
): void
Set drag-start, touches and wheel enable area in the domElement.
each values are between 0 and 1 inclusive, where 0 is left/top and 1 is right/bottom of the screen.
e.g. { x: 0, y: 0, width: 1, height: 1 } for entire area.
Parameters
- interactiveArea: DOMRect | { x: number; y: number; width: number; height: number }
Returns void
- Defined in CameraControls.ts:1467

dampingFactor

get dampingFactor(): number
backward compatible

Returns number
Deprecated
use smoothTime (in seconds) instead
- Defined in CameraControls.ts:3324
set dampingFactor(_: number): void
backward compatible
Parameters
- _: number
Returns void
Deprecated
use smoothTime (in seconds) instead
- Defined in CameraControls.ts:3336

draggingDampingFactor

get draggingDampingFactor(): number
backward compatible

Returns number
Deprecated
use draggingSmoothTime (in seconds) instead
- Defined in CameraControls.ts:3347
set draggingDampingFactor(_: number): void
backward compatible
Parameters
- _: number
Returns void
Deprecated
use draggingSmoothTime (in seconds) instead
- Defined in CameraControls.ts:3359

Methods

cancel

cancel: () => void = ...

Force cancel user dragging.

lockPointer

lockPointer: () => void

Still an experimental feature.
This could change at any time.

unlockPointer

unlockPointer: () => void

Still an experimental feature.
This could change at any time.

addEventListener

addEventListener<K extends keyof CameraControlsEventMap>(
type: K,
listener: (event: CameraControlsEventMap[K]) => any,
): void

Adds the specified event listener.
Applicable event types (which is K) are:

Event name	Timing
`'controlstart'`	When the user starts to control the camera via mouse / touches. ¹
`'control'`	When the user controls the camera (dragging).
`'controlend'`	When the user ends to control the camera. ¹
`'transitionstart'`	When any kind of transition starts, either user control or using a method with `enableTransition = true`
`'update'`	When the camera position is updated.
`'wake'`	When the camera starts moving.
`'rest'`	When the camera movement is below `.restThreshold` ².
`'sleep'`	When the camera end moving.

mouseButtons.wheel (Mouse wheel control) does not emit 'controlstart' and 'controlend'. mouseButtons.wheel uses scroll-event internally, and scroll-event happens intermittently. That means "start" and "end" cannot be detected.
Due to damping, sleep will usually fire a few seconds after the camera appears to have stopped moving. If you want to do something (e.g. enable UI, perform another transition) at the point when the camera has stopped, you probably want the rest event. This can be fine tuned using the .restThreshold parameter. See the Rest and Sleep Example.

e.g.

cameraControl.addEventListener( 'controlstart', myCallbackFunction );

Type Parameters

K extends keyof CameraControlsEventMap

Parameters

type: K
event name
listener: (event: CameraControlsEventMap[K]) => any
handler function

Returns void

removeEventListener

removeEventListener<K extends keyof CameraControlsEventMap>(
type: K,
listener: (event: CameraControlsEventMap[K]) => any,
): void
Removes the specified event listener
e.g.
```
cameraControl.addEventListener( 'controlstart', myCallbackFunction );
```
Type Parameters
- K extends keyof CameraControlsEventMap
Parameters
- type: K
  event name
- listener: (event: CameraControlsEventMap[K]) => any
  handler function
Returns void
Overrides EventDispatcher.removeEventListener
- Defined in CameraControls.ts:1520

rotate

rotate(
    azimuthAngle: number,
    polarAngle: number,
    enableTransition?: boolean,
): Promise<void>
Rotate azimuthal angle(horizontal) and polar angle(vertical).
Every value is added to the current value.
Parameters
- azimuthAngle: number
  Azimuth rotate angle. In radian.
- polarAngle: number
  Polar rotate angle. In radian.
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1537

rotateAzimuthTo

rotateAzimuthTo(azimuthAngle: number, enableTransition?: boolean): Promise<void>
Rotate azimuthal angle(horizontal) to the given angle and keep the same polar angle(vertical) target.

e.g.
```
cameraControls.rotateAzimuthTo( 30 * THREE.MathUtils.DEG2RAD, true );
```
Parameters
- azimuthAngle: number
  Azimuth rotate angle. In radian.
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1558

rotatePolarTo

rotatePolarTo(polarAngle: number, enableTransition?: boolean): Promise<void>
Rotate polar angle(vertical) to the given angle and keep the same azimuthal angle(horizontal) target.

e.g.
```
cameraControls.rotatePolarTo( 30 * THREE.MathUtils.DEG2RAD, true );
```
Parameters
- polarAngle: number
  Polar rotate angle. In radian.
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1579

rotateTo

rotateTo(
    azimuthAngle: number,
    polarAngle: number,
    enableTransition?: boolean,
): Promise<void>
Rotate azimuthal angle(horizontal) and polar angle(vertical) to the given angle.
Camera view will rotate over the orbit pivot absolutely:

azimuthAngle
```
      0º
        \
90º -----+----- -90º
          \
          180º
```
direction angle

front 0º

left 90º (Math.PI / 2)

right -90º (- Math.PI / 2)

back 180º (Math.PI)

polarAngle
```
    180º
     |
     90º
     |
     0º
```
direction angle

top/sky 180º (Math.PI)

horizontal from view 90º (Math.PI / 2)

bottom/floor 0º
Parameters
- azimuthAngle: number
  Azimuth rotate angle to. In radian.
- polarAngle: number
  Polar rotate angle to. In radian.
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1627

direction	angle
front	0º
left	90º (`Math.PI / 2`)
right	-90º (`- Math.PI / 2`)
back	180º (`Math.PI`)

direction	angle
top/sky	180º (`Math.PI`)
horizontal from view	90º (`Math.PI / 2`)
bottom/floor	0º

dolly

dolly(distance: number, enableTransition?: boolean): Promise<void>
Dolly in/out camera position.
Parameters
- distance: number
  Distance of dollyIn. Negative number for dollyOut.
- enableTransition: boolean = false
  Whether to move smoothly or immediately.
Returns Promise<void>
- Defined in CameraControls.ts:1660

dollyTo

dollyTo(distance: number, enableTransition?: boolean): Promise<void>
Dolly in/out camera position to given distance.
Parameters
- distance: number
  Distance of dolly.
- enableTransition: boolean = false
  Whether to move smoothly or immediately.
Returns Promise<void>
- Defined in CameraControls.ts:1672

dollyInFixed

dollyInFixed(distance: number, enableTransition?: boolean): Promise<void>
Dolly in, but does not change the distance between the target and the camera, and moves the target position instead.
Specify a negative value for dolly out.
Parameters
- distance: number
  Distance of dolly.
- enableTransition: boolean = false
  Whether to move smoothly or immediately.
Returns Promise<void>
- Defined in CameraControls.ts:1722

zoom

zoom(zoomStep: number, enableTransition?: boolean): Promise<void>
Zoom in/out camera. The value is added to camera zoom.
Limits set with .minZoom and .maxZoom
Parameters
- zoomStep: number
  zoom scale
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1747

zoomTo

zoomTo(zoom: number, enableTransition?: boolean): Promise<void>
Zoom in/out camera to given scale. The value overwrites camera zoom.
Limits set with .minZoom and .maxZoom
Parameters
- zoom: number
- enableTransition: boolean = false
Returns Promise<void>
- Defined in CameraControls.ts:1760

pan

pan(x: number, y: number, enableTransition?: boolean): Promise<void>
Parameters
- x: number
- y: number
- enableTransition: boolean = false
Returns Promise<void>
Deprecated
pan() has been renamed to truck()
- Defined in CameraControls.ts:1783

truck

truck(x: number, y: number, enableTransition?: boolean): Promise<void>
Truck and pedestal camera using current azimuthal angle
Parameters
- x: number
  Horizontal translate amount
- y: number
  Vertical translate amount
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1797

forward

forward(distance: number, enableTransition?: boolean): Promise<void>
Move forward / backward.
Parameters
- distance: number
  Amount to move forward / backward. Negative value to move backward
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1818

elevate

elevate(height: number, enableTransition?: boolean): Promise<void>
Move up / down.
Parameters
- height: number
  Amount to move up / down. Negative value to move down
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1835

moveTo

moveTo(
    x: number,
    y: number,
    z: number,
    enableTransition?: boolean,
): Promise<void>
Move target position to given point.
Parameters
- x: number
  x coord to move center position
- y: number
  y coord to move center position
- z: number
  z coord to move center position
- enableTransition: boolean = false
  Whether to move smoothly or immediately
Returns Promise<void>
- Defined in CameraControls.ts:1855

lookInDirectionOf

lookInDirectionOf(
    x: number,
    y: number,
    z: number,
    enableTransition?: boolean,
): Promise<void>
Look in the given point direction.
Parameters
- x: number
  point x.
- y: number
  point y.
- z: number
  point z.
- enableTransition: boolean = false
  Whether to move smoothly or immediately.
Returns Promise<void>
Transition end promise
- Defined in CameraControls.ts:1887

fitToBox

fitToBox(
    box3OrObject: Object3D<Object3DEventMap> | Box3,
    enableTransition: boolean,
    options?: Partial<FitToOptions>,
): Promise<void[]>
Fit the viewport to the box or the bounding box of the object, using the nearest axis. paddings are in unit.
set cover: true to fill enter screen.
e.g.
```
cameraControls.fitToBox( myMesh );
```
Parameters
- box3OrObject: Object3D<Object3DEventMap> | Box3
  Axis aligned bounding box to fit the view.
- enableTransition: boolean
  Whether to move smoothly or immediately.
- options: Partial<FitToOptions> = {}
  | <object> { cover: boolean, paddingTop: number, paddingLeft: number, paddingBottom: number, paddingRight: number }
Returns Promise<void[]>
Transition end promise
- Defined in CameraControls.ts:1909

fitToSphere

fitToSphere(
sphereOrMesh: Object3D<Object3DEventMap> | Sphere,
enableTransition: boolean,
): Promise<void[]>
Fit the viewport to the sphere or the bounding sphere of the object.
Parameters
- sphereOrMesh: Object3D<Object3DEventMap> | Sphere
- enableTransition: boolean
Returns Promise<void[]>
- Defined in CameraControls.ts:2029

setLookAt

setLookAt(
    positionX: number,
    positionY: number,
    positionZ: number,
    targetX: number,
    targetY: number,
    targetZ: number,
    enableTransition?: boolean,
): Promise<void>
Look at the target from the position.
Parameters
- positionX: number
- positionY: number
- positionZ: number
- targetX: number
- targetY: number
- targetZ: number
- enableTransition: boolean = false
Returns Promise<void>
- Defined in CameraControls.ts:2076

lerp

lerp(
    stateA: CameraControlsLerpState,
    stateB: CameraControlsLerpState,
    t: number,
    enableTransition?: boolean,
): Promise<void>
Interpolates between two states.
Parameters
- stateA: CameraControlsLerpState
- stateB: CameraControlsLerpState
- t: number
- enableTransition: boolean = false
Returns Promise<void>
- Defined in CameraControls.ts:2122

lerpLookAt

lerpLookAt(
    positionAX: number,
    positionAY: number,
    positionAZ: number,
    targetAX: number,
    targetAY: number,
    targetAZ: number,
    positionBX: number,
    positionBY: number,
    positionBZ: number,
    targetBX: number,
    targetBY: number,
    targetBZ: number,
    t: number,
    enableTransition?: boolean,
): Promise<void>
Similar to setLookAt, but it interpolates between two states.
Parameters
- positionAX: number
- positionAY: number
- positionAZ: number
- targetAX: number
- targetAY: number
- targetAZ: number
- positionBX: number
- positionBY: number
- positionBZ: number
- targetBX: number
- targetBY: number
- targetBZ: number
- t: number
- enableTransition: boolean = false
Returns Promise<void>
- Defined in CameraControls.ts:2209

setPosition

setPosition(
    positionX: number,
    positionY: number,
    positionZ: number,
    enableTransition?: boolean,
): Promise<void>
Set angle and distance by given position.
An alias of setLookAt(), without target change. Thus keep gazing at the current target
Parameters
- positionX: number
- positionY: number
- positionZ: number
- enableTransition: boolean = false
Returns Promise<void>
- Defined in CameraControls.ts:2243

setTarget

setTarget(
    targetX: number,
    targetY: number,
    targetZ: number,
    enableTransition?: boolean,
): Promise<void>
Set the target position where gaze at.
An alias of setLookAt(), without position change. Thus keep the same position.
Parameters
- targetX: number
- targetY: number
- targetZ: number
- enableTransition: boolean = false
Returns Promise<void>
- Defined in CameraControls.ts:2262

setFocalOffset

setFocalOffset(
    x: number,
    y: number,
    z: number,
    enableTransition?: boolean,
): Promise<void>
Set focal offset using the screen parallel coordinates. z doesn't affect in Orthographic as with Dolly.
Parameters
- x: number
- y: number
- z: number
- enableTransition: boolean = false
Returns Promise<void>
- Defined in CameraControls.ts:2287

setOrbitPoint

setOrbitPoint(targetX: number, targetY: number, targetZ: number): void
Set orbit point without moving the camera.
SHOULD NOT RUN DURING ANIMATIONS. setOrbitPoint() will immediately fix the positions.
Parameters
- targetX: number
- targetY: number
- targetZ: number
Returns void
- Defined in CameraControls.ts:2312

setBoundary

setBoundary(box3?: Box3): void
Set the boundary box that encloses the target of the camera. box3 is in THREE.Box3
Parameters
- Optionalbox3: Box3
Returns void
- Defined in CameraControls.ts:2340

setViewport

setViewport(
    viewportOrX: null | number | Vector4,
    y: number,
    width: number,
    height: number,
): void
Set (or unset) the current viewport.
Set this when you want to use renderer viewport and .dollyToCursor feature at the same time.
Parameters
- viewportOrX: null | number | Vector4
- y: number
- width: number
- height: number
Returns void
- Defined in CameraControls.ts:2367

getDistanceToFitBox

getDistanceToFitBox(
    width: number,
    height: number,
    depth: number,
    cover?: boolean,
): number
Calculate the distance to fit the box.
Parameters
- width: number
  box width
- height: number
  box height
- depth: number
  box depth
- cover: boolean = false
Returns number
distance
- Defined in CameraControls.ts:2399

getDistanceToFitSphere

getDistanceToFitSphere(radius: number): number
Calculate the distance to fit the sphere.
Parameters
- radius: number
  sphere radius
Returns number
distance
- Defined in CameraControls.ts:2418

getTarget

getTarget(out: Vector3, receiveEndValue?: boolean): Vector3
Returns the orbit center position, where the camera looking at.
Parameters
- out: Vector3
  The receiving Vector3 instance to copy the result
- receiveEndValue: boolean = true
  Whether receive the transition end coords or current. default is true
Returns Vector3
- Defined in CameraControls.ts:2436

getPosition

getPosition(out: Vector3, receiveEndValue?: boolean): Vector3
Returns the camera position.
Parameters
- out: Vector3
  The receiving Vector3 instance to copy the result
- receiveEndValue: boolean = true
  Whether receive the transition end coords or current. default is true
Returns Vector3
- Defined in CameraControls.ts:2449

getSpherical

getSpherical(out: Spherical, receiveEndValue?: boolean): Spherical
Returns the spherical coordinates of the orbit.
Parameters
- out: Spherical
  The receiving Spherical instance to copy the result
- receiveEndValue: boolean = true
  Whether receive the transition end coords or current. default is true
Returns Spherical
- Defined in CameraControls.ts:2462

getFocalOffset

getFocalOffset(out: Vector3, receiveEndValue?: boolean): Vector3
Returns the focal offset, which is how much the camera appears to be translated in screen parallel coordinates.
Parameters
- out: Vector3
  The receiving Vector3 instance to copy the result
- receiveEndValue: boolean = true
  Whether receive the transition end coords or current. default is true
Returns Vector3
- Defined in CameraControls.ts:2475

normalizeRotations

normalizeRotations(): CameraControls
Normalize camera azimuth angle (horizontal rotation) between -180 and 180 degrees.

Returns CameraControls
This CameraControls instance.
- Defined in CameraControls.ts:2487

reset

reset(enableTransition?: boolean): Promise<void[]>
Reset all rotation and position to defaults.
Parameters
- enableTransition: boolean = false
Returns Promise<void[]>
- Defined in CameraControls.ts:2514

saveState

saveState(): void
Set current camera position as the default position.

Returns void
- Defined in CameraControls.ts:2552

updateCameraUp

updateCameraUp(): void
Sync camera-up direction.
When camera-up vector is changed, .updateCameraUp() must be called.

Returns void
- Defined in CameraControls.ts:2567

applyCameraUp

applyCameraUp(): void
Apply current camera-up direction to the camera.
The orbit system will be re-initialized with the current position.

Returns void
- Defined in CameraControls.ts:2579

update

update(delta: number): boolean
Update camera position and directions.
This should be called in your tick loop every time, and returns true if re-rendering is needed.
Parameters
- delta: number
Returns boolean
updated
- Defined in CameraControls.ts:2604

toJSON

toJSON(): string
Get all state in JSON string

Returns string
- Defined in CameraControls.ts:2880

fromJSON

fromJSON(json: string, enableTransition?: boolean): void
Reproduce the control state with JSON. enableTransition is where anim or not in a boolean.
Parameters
- json: string
- enableTransition: boolean = false
Returns void
- Defined in CameraControls.ts:2919

connect

connect(domElement: HTMLElement): void
Attach all internal event handlers to enable drag control.
Parameters
- domElement: HTMLElement
Returns void
- Defined in CameraControls.ts:2959

dispose

dispose(): void
Dispose the cameraControls instance itself, remove all eventListeners.

Returns void
- Defined in CameraControls.ts:2995

hasEventListener

hasEventListener(type: string, listener: Listener): boolean
Presence of the specified event listener.
Parameters
- type: string
  event name
- listener: Listener
  handler function
Returns boolean
Inherited from EventDispatcher.hasEventListener
- Defined in EventDispatcher.ts:34

removeAllEventListeners

removeAllEventListeners(type?: string): void
Removes all event listeners
Parameters
- Optionaltype: string
  event name
Returns void
Inherited from EventDispatcher.removeAllEventListeners
- Defined in EventDispatcher.ts:68

dispatchEvent

dispatchEvent(event: DispatcherEvent): void
Fire an event type.
Parameters
- event: DispatcherEvent
  DispatcherEvent
Returns void
Inherited from EventDispatcher.dispatchEvent
- Defined in EventDispatcher.ts:86

Other

verticalDragToForward

set verticalDragToForward(_: boolean): void
Parameters
- _: boolean
Returns void
Deprecated
Use cameraControls.mouseButtons.left = CameraControls.ACTION.SCREEN_PAN instead.
- Defined in CameraControls.ts:440

stop

stop(): void
stop all transitions.

Returns void
- Defined in CameraControls.ts:2500

disconnect

disconnect(): void
Detach all internal event handlers to disable drag control.

Returns void
- Defined in CameraControls.ts:2977

`Static`createBoundingSphere

createBoundingSphere(object3d: Object3D, out?: Sphere): Sphere
Parameters
- object3d: Object3D
- out: Sphere = ...
Returns Sphere
- Defined in CameraControls.ts:3365

Class CameraControls

Hierarchy

Index

Statics

Constructor

Properties

Methods

Other

Statics

Staticinstall

Parameters

Returns void

StaticACTION

Constructor

constructor

Parameters

Returns CameraControls

Properties

minPolarAngle

maxPolarAngle

minAzimuthAngle

maxAzimuthAngle

minDistance

maxDistance

infinityDolly

minZoom

maxZoom

smoothTime

draggingSmoothTime

maxSpeed

azimuthRotateSpeed

polarRotateSpeed

dollySpeed

dollyDragInverted

truckSpeed

dollyToCursor

dragToOffset

boundaryFriction

restThreshold

colliderMeshes

mouseButtons

touches

camera

Returns PerspectiveCamera | OrthographicCamera

Parameters

Returns void

enabled

Returns boolean

Parameters

Returns void

active

Returns boolean

currentAction

Returns number

distance

Returns number

Parameters

Returns void

azimuthAngle

Returns number

Parameters

Returns void

polarAngle

Returns number

Parameters

Returns void

boundaryEnclosesCamera

Returns boolean

Parameters

Returns void

interactiveArea

Parameters

Returns void

dampingFactor

Returns number

Deprecated

Parameters

Returns void

Deprecated

draggingDampingFactor

`Static`install

`Static`ACTION