lil-gui
#GUI #JavaScript #Web
https://gyazo.com/35a0f2aad8a375b6de5a776f19d44af9
JavaScript・Webコンテンツ用のGUIライブラリ
メンテが止まったdat.guiの後継
Three.jsのexamplesで使われている
https://lil-gui.georgealways.com/
使い方
基本の使い方
code:js
import GUI from 'lil-gui';
const gui = new GUI();
const params = {
boolParam: true,
stringParam: 'Hello',
numberParam: 420,
rangeParam: 69,
optionsParam: 1,
colorParam: '#ff00ff',
};
gui.add( params, 'boolParam' );
gui.add( params, 'stringParam' );
gui.add( params, 'numberParam' );
gui.add( params, 'rangeParam', 0, 100, 1 ); // min, max, step
gui.add( params, 'optionsParam', { 'one': 1, 'two': 2 } ); // options, can be array or object
gui.addColor( params, 'colorParam' );
CSSは自動でインポートされるはず
ボタン
code:js
const params = {
func: () => console.log( 'hi' );
};
gui.add( params, 'func' );
ラベルの文字変える
code:js
gui.add( params, 'stringParam' ).name( 'String Param' );
onChange
code:js
gui.add( params, 'stringParam' ).onChange( ( value ) => {
console.log( value );
} );