# three-floating-controls

1.2.0 • Public • Published

# three-floating-controls

Three.js camera controls.
Demo 1: https://projects.thibautfoussard.com/lightbulbs/
Demo 2: https://projects.thibautfoussard.com/dark_slime/

## Install

`npm i three-floating-controls`

## Usage

```import FloatingControls from 'three-floating-controls'

let controls = new FloatingControls(camera);

function loop() {
requestAnimationFrame(loop);
controls.update();
}```

## Options

### cameraCenter (Vector3)

Initial position of the camera (the camera will move around this point).
Useless if you already have defined the camera position beforehand.
Default is the camera position.
Example:

```let controls = new FloatingControls(camera, {
cameraCenter: new THREE.Vector3(0, 1, 0)
});
// is equivalent to
camera.position.set(0, 1, 0);
let controls = new FloatingControls(camera);```

### lookAt (Vector3)

Rotates the camera as it moves to look at the position provided.
If set to false, the camera will keep its initial rotation. Default: [0, 0, 0]
Example:

```let controls = new FloatingControls(camera, {
lookAt: new THREE.Vector3(0, 1, 0)
});```

### axisFactor (array)

Influence factor of the controls on the x and y axes.
Default: [1, 1]

```let controls = new FloatingControls(camera, {
axisFactor: [2, 1] // camera will rotate twice as much on the x axis
});```

### amp (float)

Motion amplification. A greater value will make the camera go further.
Default: 1
Example:

```let controls = new FloatingControls(camera, {
amp: .3
});```

### lerpAmount (float, range is [0,1])

For each iteration of the linear interpolation, the amount to interpolate between the mouse position and the camera position. A smaller value will make the animation smoother.
Default: .1
Example:

```let controls = new FloatingControls(camera, {
lerpAmount: .05
});```

### absoluteMinX, absoluteMaxX, absoluteMinY, absoluteMaxY

Absolute min & max coordinates of the camera.
Default: null
Example:

```let controls = new FloatingControls(camera, {
absoluteMinX: -10,
absoluteMaxX: 10,
absoluteMinY: -10,
absoluteMaxY: 10
});```

## Attributes

### active

If set to false, the class will not update the camera position when the mouse position changes.
Default is true.

```let controls = new FloatingControls(camera, { ... });
controls.active = false;```

## Package Sidebar

### Install

`npm i three-floating-controls`

1

1.2.0

ISC

6.28 kB

3