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

Initial position of the camera (the camera will move around this point).
Useless if you already have defined the camera position beforehand.
Type: Vector3
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

Rotates the camera as it moves to look at the position provided.
Type: Vector3
Default: new THREE.Vector3(0, 0, 0)
Example:

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

amp

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

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

lerpAmount

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.
Between 0 and 1.
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;