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 );
Optional domElement: HTMLElementA HTMLElement for the draggable area, usually renderer.domElement.
Optional eventFromInputModule: booleanForce cancel user dragging.
Force cancel user dragging.
Still an experimental feature. This could change at any time.
Still an experimental feature. This could change at any time.
Still an experimental feature. This could change at any time.
Still an experimental feature. This could change at any time.
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.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 );
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.
Distance of dolly.
Whether to move smoothly or immediately.
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 );
Axis aligned bounding box to fit the view.
Whether to move smoothly or immediately.
| <object> { cover: boolean, paddingTop: number, paddingLeft: number, paddingBottom: number, paddingRight: number }
Transition end promise
Returns the focal offset, which is how much the camera appears to be translated in screen parallel coordinates.
The receiving Vector3 instance to copy the result
Whether receive the transition end coords or current. default is true
Similar to setLookAt, but it interpolates between two states.
Move target position to given point.
x coord to move center position
y coord to move center position
z coord to move center position
Whether to move smoothly or immediately
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.
Azimuth rotate angle. In radian.
Polar rotate angle. In radian.
Whether to move smoothly or immediately
Rotate azimuthal angle(horizontal) to the given angle and keep the same polar angle(vertical) target.
e.g.
cameraControls.rotateAzimuthTo( 30 * MathUtils.DEG2RAD, true );
Azimuth rotate angle. In radian.
Whether to move smoothly or immediately
Rotate polar angle(vertical) to the given angle and keep the same azimuthal angle(horizontal) target.
e.g.
cameraControls.rotatePolarTo( 30 * MathUtils.DEG2RAD, true );
Polar rotate angle. In radian.
Whether to move smoothly or immediately
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º |
Azimuth rotate angle to. In radian.
Polar rotate angle to. In radian.
Whether to move smoothly or immediately
Set current camera position as the default position.
Look at the target from the position.
Set angle and distance by given position.
An alias of setLookAt(), without target change. Thus keep gazing at the current target
Protected _activeProtected _boundaryProtected _boundaryProtected _cameraProtected _cameraProtected _changedProtected _changedProtected _dollyProtected Optional _domProtected _elementProtected _enabledProtected _focalProtected _focalProtected _focalProtected _focalProtected _hasProtected _interactiveProtected _isProtected _isProtected _isProtected _isProtected _isProtected _isProtected _lastProtected _lastProtected _lastProtected _lockedProtected _nearProtected _needsProtected _phiProtected _position0Protected _radiusProtected _sphericalProtected _sphericalProtected _stateProtected _targetProtected _target0Protected _targetProtected _targetProtected _targetProtected _thetaProtected _updatedProtected _viewportProtected _yProtected _yProtected _zoomProtected _zoom0Protected _zoomProtected _zoomProtected _addProtected _collisionProtected _createProtected _disposeProtected _dollyProtected _dollyProtected _encloseProtected _findProtected _findProtected _getProtected _getProtected _getProtected _removeProtected _rotateProtected _truckProtected _updateProtected _zoom对状态进行设置，采用堆栈方案，会保存之前的状态，退出时还原之前的状态
Optional enabledControl: boolean是否启用 默认false
Optional enableWheelWhenCtrlDisabled: boolean是否滚轮缩放 默认true
load current camera position
Optional enableTransition: booleanload current camera position
Optional duration: numberOptional opts: { Optional easing?: Easingeasing
Optional id?: stringid
Optional repeat重复次数
Optional tag?: string分类
Optional yoyo往返次数
移除监听.
Event name
Optional fn: FunctionFunction, If is undefined, delete all corresponding event listeners.
增加监听
Event name
Function
This
只监听一次.
Event name
Function
This
相机抖动
Optional duration: number每次持续时长 (ms) 默认 1000
Optional frequency: number抖动频率 默认 10
Optional strength: number强度 默认 1
Optional isLoop: boolean是否循环抖动 默认 false
Static createStatic installSpeed of azimuth (horizontal) rotation.
Friction ratio of the boundary.
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.
true to invert direction when dollying or zooming via drag
Speed of mouse-wheel dollying.
true to enable Dolly-in to the mouse cursor coords.
the smoothTime while dragging
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.
Maximum horizontal angle in radians.
The angle has to be greater than .minAzimuthAngle.
The default value is Infinity.
e.g.
cameraControls.maxAzimuthAngle = Infinity;
Maximum distance for dolly. The value must be higher than minDistance. Default is Infinity.
PerspectiveCamera only.
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;
Max transition speed in unit-per-seconds
Maximum camera zoom.
Minimum horizontal angle in radians.
The angle has to be less than .maxAzimuthAngle.
The default value is - Infinity.
e.g.
cameraControls.minAzimuthAngle = - Infinity;
Minimum distance for dolly. The value must be higher than 0. Default is Number.EPSILON.
PerspectiveCamera only.
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;
Minimum camera zoom.
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 |
mouseButtons.wheel is:DOLLY for Perspective camera.ZOOM for Orthographic camera, and can't set DOLLY.Speed of polar (vertical) rotation.
Controls how soon the rest event fires as the camera slows.
Approximate time in seconds to reach the target. A smaller value will reach the target faster.
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 |
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.Speed of drag for pan and pedestal.
if true, pan in screen-space
Returns true if the controls are active updating.
readonly value.
get/set the azimuth angle (horizontal) in radians.
Every 360 degrees turn is added to .azimuthAngle value, which is accumulative.
Whether camera position should be enclosed in the boundary or not.
The camera to be controlled
Getter for the current ACTION.
readonly value.
get/set Current distance.
Whether or not the controls are enabled.
false to disable user dragging/touch-move, but all methods works.
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.
get/set the polar angle (vertical) in radians.
Static ACTIONlist all ACTIONs
事件派发管理