uniforms-gui
Small utility to transform all uniforms to a GUI controls. GUI from uil.js
Install
yarn add uniforms-gui
API example
const options = css: 'right: 0px;' // options from uil.js const debug = true // add console log message when change values const gui = options debug; // istantiate uil.js gui; // add N program to create the GUI controls from uniforms object gui; // add GUI to dom guiclear; // reset all values gui; // remove GUI from dom
Minimal example
{ const gui = ; //... const material = vertexShader fragmentShader uniforms: uTime: value: 00 ; gui; gui; //...}
Advanced example
{ const gui = ; //... const material = vertexShader fragmentShader uniforms: uBool: value: false // Automatic type "bool" uFloat: value: 00 // Automatic type "slide" uVector: value: 0 100 0 // Automatic type "vector" uSlideWithControls: value: 00 controls: min: 001 max: 55 step: 005 precision: 2 // add controls options uColorGraph: value: 00 00 00 controls: type: "graph" name: "uColor" // to control another uniforms uColor: value: 00 00 00 controls: type: "color" uNumericBool: value: 10 controls: type: "bool" uKnob: value: 00 controls: type: "knob" min: 0 max: 1 ; // no longer required // material.uniformsNeedUpdate = true const material2 = vertexShader fragmentShader uniforms: uBool: value: false ; gui; gui; gui; //...}
Controls options
// same from uil.js w: 120 h: 100 min: 0 max: 100 step: 1 precision: 2 fontColor: '#D4B87B' multiplicator: 1 mode: 1 // options name: 'uName' // to controls another uniforms type: 'bool|slide|color|knob|circular|joystick'
Build
yarn build
License
MIT © William Manco