README
camera-controls
A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions, es6 import and FPV.
Test
To test the controller then do:
git clone
cd camera-controls
yarn
yarn run dev
- Open
camera-controls/examples/basic.html
on browser
Usage
import * as THREE from 'three';
import { CameraControls } from 'camera-controls';
CameraControls.install(THREE);
// snip ( init three scene... )
const clock = new THREE.Clock();
const camera = new THREE.PerspectiveCamera(60, width / height, 0.01, 100);
const cameraControls = new CameraControls(camera, renderer.domElement);
( function anim () {
// snip
const delta = clock.getDelta();
const isControlsUpdated = cameraControls.update(delta);
requestAnimationFrame(anim);
if (isControlsUpdated) {
renderer.render(scene, camera);
}
} )();
Constructor
CameraControls(camera, domElement)
camera
is a three.js perspective camera to be controlled.domElement
is a HTML element for draggable area.
Properties
.enabled
: Default istrue
. Whether or not the controls are enabled..minDistance
: Default is0
. Minimum distance for dolly..maxDistance
: Default isInfinity
. Maximum distance for dolly..minPolarAngle
: Default is0
, in radians..maxPolarAngle
: Default isMath.PI
, in radians..minAzimuthAngle
: Default is-Infinity
, in radians..maxAzimuthAngle
: Default isInfinity
, in radians..dampingFactor
: Default is0.5
..draggingDampingFactor
: Default is0.1
..minZoomDistance
: Default is0.3
. Min zoom distance per zoom event..maxZoomDistance
: Default is1.0
. Max zoom distance per zoom event..panSpeed
: Default is1.0
. Speed of drag panning (only for touch)..minPanDistance
: Default is1.0
. Min distance to mvoe when panning..rotationSpeed
: Default is0.005
. Speed to rotate in first-person mode..enableKeyboardNavigation
: Default istrue
. If keyboard navigation is enabled..minDistToTarget
: Default is2.0
. Minimum distance to a target you can be (will push the target if closer).
Methods
rotate(rotX, rotY, enableTransition)
Rotate azimuthal angle(theta) and polar angle(phi). rotX
and rotY
are in radian. enableTransition
is in a boolean
rotateTo(rotX, rotY, enableTransition)
Rotate azimuthal angle(theta) and polar angle(phi) to a given point.
dolly(distance, enableTransition, x = 0, y = 0)
Dolly in/out camera position. distance
is in a number. enableTransition
is in a boolean.
x
and y
is the dolly direction in GL coordinates (-1, +1).
dollyTo(distance, enableTransition, x = 0, y = 0)
Dolly in/out camera position to given distance.
x
and y
is the dolly direction in GL coordinates (-1, +1).
pan(x, y, enableTransition)
Pan camera using current azimuthal angle.
moveTo(x, y, z, enableTransition)
Move target
position to given point.
getState()
Get the current internal state.
setCameraPosition(position, target, enableTransition = false)
Set camera position to position
and target to target
.
reset(enableTransition)
Reset all rotation, zoom, position to default.
update(delta)
Update camera position and directions. This should be called in your tick loop and returns true
if re-rendering is needed.
delta
is delta time between previous update call.
dispose()
Dispose cameraControls instancem, remove all eventListeners.