Enjoyable camera flavored controls for Tweakpane
npm install @tweakpane/plugin-camerakit
html
`
$3
`js
import {Pane} from 'tweakpane';
import * as CamerakitPlugin from '@tweakpane/plugin-camerakit';const pane = new Pane();
pane.registerPlugin(CamerakitPlugin);
`
Usage
`js
// Ring input
pane.addBinding(params, 'key', {
// Ring control
view: 'cameraring',
// Appearance of the ring view: 0 | 1 | 2
series: 0,
});
``js
// Configuring a scale
pane.addBinding(params, 'key', {
view: 'cameraring',
series: 0,
// Scale unit
unit: {
// Pixels for the unit
pixels: 50,
// Number of ticks for the unit
ticks: 10,
// Amount of a value for the unit
value: 0.2,
},
// You can use min, max, step same as a number input
min: 1,
step: 0.02,
});
``js
// Wide
pane.addBinding(params, 'key', {
view: 'cameraring',
series: 0,
// Hide a text input and widen the ring view
wide: true,
});
``js
// Wheel input
pane.addBinding(params, 'key', {
view: 'camerawheel',
// Amount of a value per pixel
amount: 100,
});
``
[tweakpane]: https://github.com/cocopon/tweakpane/