FirstPersonControls - Verge3D User Manual - Soft8Soft
Description: Learn how to use FirstPersonControls in your interactive 3D apps made with Verge3D

Controls →

# FirstPersonControls

First person controls allow the camera to move on the scene like a character in the first-person view mode.

## Constructor

### FirstPersonControls(object : Camera, domElement : HTMLElement)

object
  The camera to be controlled (required).
domElement
  The HTML element used for event listeners (optional). By default this is the whole document, however if you only want to the controls to work over a specific element (e.g. the canvas) you can specify that here.

## Properties

### # .collisionMeshes : Array

Array of objects used to constraint the movements of the camera.

### # .domElement : HTMLElement

The HTMLElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will not set up new event listeners. Default is the whole document.

### # .enabled : Boolean

Whether or not the controls are enabled.

### # .enableCollisions : Boolean

Whether or not the camera movements are constrainted. Default is `true`.

### # .enableCtrlZoom : Boolean

Set to `true` to zoom upon pressing on ctrl key (like Google Maps). Default is `false`.

### # .enableDamping : Boolean

Whether to enable damping (inertia), which is used to give a sense of weight to the controls. Default is `true`.

Note that if this is enabled, you must call .update() in your animation loop.

### # .enableKeys : Boolean

Enable or disable the use of keyboard controls. Default is `true`.

### # .enablePan : Boolean

Enable or disable camera panning. Default is `true`.

### # .enablePointerLock : Boolean

Enable the pointer lock feature to capture the mouse pointer upon app start. The user should click somewhere on the screen to lock up the cursor and move in 3D space without the need to click/drag with the mouse buttons. Default is `false`.

### # .enableRotate : Boolean

Enable or disable horizontal and vertical rotation of the camera. Default is `true`.

Note that it is possible to disable a single axis by setting the min and max of the polar angle or azimuth angle to the same value, which will cause the vertical or horizontal rotation to be fixed at that value.

### # .enableZoom : Boolean

Enable or disable zooming (dollying) of the camera. Default is `true`.

### # .gazeLevel : Float

Camera "gaze" (or "head"/"eyes") level. Default is `1.8`.

### # .inTween : Boolean

Flag which says whether the camera is currently in the state of tweening.

### # .object : Camera

The camera (or other object) that is being controlled.

### # .panInertia : Float

The panning damping inertia used if .enableDamping is set to `true`. Note that for this to work, you must call .update() in your animation loop. Default is `0.05`.

### # .panSpeedKey : Float

Speed of panning (pixels moved) when using keyboard arrow keys. Default is `0.15`.

### # .rotateInertia : Float

The rotation damping inertia used if .enableDamping is set to true. Note that for this to work, you must call .update() in your animation loop. Default is `0.05`.

### # .rotateInertiaTouch : Float

Same as .rotateInertia, but for the touch-based controls used on mobile devices. Default value is `0.05`.

### # .rotateSpeed : Float

Speed of rotation. Default is `0.9`.

### # .rotateSpeedTouch : Float

Speed of rotation on touch-based devices. Default is `0.75`.

### # .screen : Object

Screen offset and size.

### # .storyHeight : Float

Maximum height of the story. Specify if you need multiple floors in your scene, such as two-level cottage or large shopping mall. Default is `3.0`.

### # .zoomSpeed : Float

Speed of zooming / dollying. Default is `30.0`.

### # .zoomSpeedKey : Float

Speed of zooming when using keyboard arrow keys. Default is `0.2`.

### # .zoomInertia : Float

The zoom damping inertia used if .enableDamping is set to true. Note that for this to work, you must call .update() in your animation loop. Default is `0.05`.

## Methods

### # .dispose()

Remove all the event listeners.

### # .handleResize()

Update the .screen object by retrieving position and size of the .domElement.

### # .tween(toPosition : Vector3, toTarget : Vector3, time : Float, finishCb : Function, movementType : Constant)

toPosition
  The new position of the camera.
toTarget
  The new target point.
time
  The length of the tween animation.
finishCb
  A callback to be called after the tween animation ends.
movementType
  The movement interpolation. Can be v3d.TweenLinear (default) or v3d.TweenSpherical.

Change the camera's current position and target point to the specified new position and target smoothly over the specified time.

### # .tweenZoomTo(toTarget : Vector3, toZoom : Float, time : Float, finishCb : Function)

toTarget
  The new target point.
toZoom
  The new zoom factor.
time
  The length of the tween animation.
finishCb
  A callback to be called after the tween animation ends.

Change the orthographic camera target point and zoom factor smoothly over the specified period of time.

### # .update() → Boolean

Update the controls. Must be called after any manual changes to the camera's transform, or in the update loop if .autoRotate or .enableDamping are set.

## Source

For more info on how to obtain the source code of this module see this page.