Class CameraControls

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,
    MathUtils : {
        DEG2RAD: MathUtils.DEG2RAD,
        clamp: MathUtils.clamp,
    },
};

CameraControls.install( { THREE: subsetOfTHREE } );

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

1. 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.
2. 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 );

Removes the specified event listener
e.g.

cameraControl.addEventListener( 'controlstart', myCallbackFunction );

Rotate azimuthal angle(horizontal) and polar angle(vertical).
Every value is added to the current value.

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 );

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 );

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º

polarAngle

    180º
     |
     90º
     |
     0º

Dolly in/out camera position.

Dolly in/out camera position to given distance.

Zoom in/out camera. The value is added to camera zoom.
Limits set with .minZoom and .maxZoom

Zoom in/out camera to given scale. The value overwrites camera zoom.
Limits set with .minZoom and .maxZoom

Deprecated

pan() has been renamed to truck()

Truck and pedestal camera using current azimuthal angle

Move forward / backward.

Move target position to given point.

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 );

Returns

Transition end promise

Fit the viewport to the sphere or the bounding sphere of the object.

Make an orbit with given points.

Similar to setLookAt, but it interpolates between two states.

setLookAt without target, keep gazing at the current target

setLookAt without position, Stay still at the position.

Set focal offset using the screen parallel coordinates. z doesn't affect in Orthographic as with Dolly.

Set orbit point without moving the camera.
SHOULD NOT RUN DURING ANIMATIONS. setOrbitPoint() will immediately fix the positions.

Set the boundary box that encloses the target of the camera. box3 is in THREE.Box3

Set (or unset) the current viewport.
Set this when you want to use renderer viewport and .dollyToCursor feature at the same time.

Calculate the distance to fit the box.

Returns

distance

Calculate the distance to fit the sphere.

Returns

distance

Returns its current gazing target, which is the center position of the orbit.

Returns its current position.

Returns its current focal offset, which is how much the camera appears to be translated in screen parallel coordinates.

Normalize camera azimuth angle rotation between 0 and 360 degrees.

Reset all rotation and position to defaults.

Set current camera position as the default position.

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

Update camera position and directions.
This should be called in your tick loop every time, and returns true if re-rendering is needed.

Returns

updated

Get all state in JSON string

Reproduce the control state with JSON. enableTransition is where anim or not in a boolean.

Dispose the cameraControls instance itself, remove all eventListeners.