InputAxis

A single controllable value with limits, damping and recentering.

An InputAxis is one value the user controls, like pan or tilt on PanTilt. An input controller feeds it drags, but you can drive it from code as well. It also works on its own: call update(dt) once per frame.

Settings

Setting	Description	Default
`value`	The current value.	`0`
`center`	The value `recentering` returns to.	`0`
`range`	`[min, max]` limits, or `null` for none.	`null`
`wrap`	Loop around at the edges of `range` instead of stopping.	`false`
`damping`	Seconds to catch up with the input. See Damping.	`0`
`maxSpeed`	Maximum change per second.	`Infinity`
`recentering`	Return to `center` after a while without input. See below.	off
`autoNormalize`	With `wrap` on, bring `value` back inside `range` after each drag.	`false`

Recentering

Once the user lets go and wait seconds pass without input, the value eases back to center over time seconds. Any new input cancels it.

axis.recentering = { enabled: true, wait: 1, time: 0.5 };

Usage

The axes are fields of the piece:

aim.pan.applyDelta(5); // turn by 5°
aim.pan.setValue(0);   // jump straight to 0°
aim.pan.value;         // read the current value

On its own

import { InputAxis } from '@pmndrs/klipp';

const zoom = new InputAxis({ value: 10, center: 10, range: [2, 20] });

zoom.applyDelta(-1);
zoom.update(dt);
zoom.value;

The axes are fields of the piece:

aim.pan.applyDelta(5); // turn by 5°
aim.pan.setValue(0);   // jump straight to 0°
aim.pan.value;         // read the current value

On its own

import { InputAxis } from '@pmndrs/klipp';

const zoom = new InputAxis({ value: 10, center: 10, range: [2, 20] });

zoom.applyDelta(-1);
zoom.update(dt);
zoom.value;

The axes are on the piece's ref:

const aim = useRef<PanTiltAimThree>(null);

aim.current.pan.applyDelta(5); // turn by 5°
aim.current.pan.setValue(0);   // jump straight to 0°
aim.current.pan.value;         // read the current value

Edit this page