Plugins
Expand Tweakpane world.
Essentials
Essential components.
const PARAMS = {
interval: {min: 16, max: 48},
};
// Interval
pane.addInput(PARAMS, 'interval', {
min: 0,
max: 100,
step: 1,
});
// ...
// FPS graph
const fpsGraph = pane.addBlade({
view: 'fpsgraph',
label: 'fpsgraph',
});
function render() {
fpsGraph.begin();
// Rendering
fpsGraph.end();
}
// ...
Camerakit
Enjoyable camera flavored controls.
const PARAMS = {
flen: 55,
fnum: 1.8,
iso: 100,
};
// ...
pane.addInput(PARAMS, 'fnum', {
// Use a ring view of Camerakit
view: 'cameraring',
// Appearance of the ring
series: 1,
// Configuration of the scale unit
unit: {ticks: 10, pixels: 40, value: 0.2},
// Hide a text input and widen the ring
wide: true,
// Number constraints
min: 1.4,
step: 0.02,
});
// ...
Find 3rd party plugins
#tweakpane topic on GitHub may be useful to search 3rd party plugins.
Create your own plugin
From version 2.0.0, you can provide custom components with the plugin system.
pane.registerPlugin({
plugin: {
...
},
});
.js
See the template repository for details.