Edited at

dat.GUI入門

More than 1 year has passed since last update.


dat.GUI入門

この記事は、ドットインストールの dat.GUI入門を見て、メモしています。

https://dotinstall.com/lessons/basic_datgui


 dat.GUIをCDNで読み込む

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js

最初にインスタンスを作成

const gui = new dat.GUI();

dat.GUで値を変更する場合は、オブジェクトである必要があるので作成

const PROPERTY = {

'startOffsetY' : -50,
'endOffsetY' : 50,
'startOffsetX' : 500,
'endOffsetX' : -50,
'SIZE_MIN' : 0.3,
'SIZE_MAX' : 0.5
}

変数とか、関数で格納とか

var FizzyText = function() {

this.message = 'dat.gui';
this.speed = 0.8;
this.displayOutline = false;
};

window.onload = function() {
var text = new FizzyText();
};

インスタンスの作成とオブジェクトの準備が終わったら



gui.add(オブジェクト名,'キー')



でUIが表示される

UIを消したい場合h keyで消せる


 刻み値、最小値、最大値

gui.add(オブジェクト名,'キー','最小値','最大値', '刻み値')

最小値、最大値を指定するとUIがスライダーになる


 セレクトボックス

配列で渡してあげればいい



gui.add(オブジェクト名,'キー',[数値など,数値など,数値など])

ラベルを付けたい場合

連想配列で渡してあげればいい



gui.add(オブジェクト名,'キー',['key':value ,'key':value, 'key':value])


 カラーピッカー

addColor(オブジェクト名,'キー')

を使う

オブジェクトに16進数もしくは、配列を入れてあげる

RGBの場合は配列で渡してあげればいい

const PROPERTY = {

     'color1' = '#ffffff',
'color2' = [0,0,0]
}

gui.addColor(PROPERTY,'color1')

gui.addColor(PROPERTY,'color2')


 チェックボックス

booleを扱うときに使う

条件分岐で使おう

const PROPERTY = {

     'hasCheck' = false
}

gui.add(PROPERTY, 'hasCheck')


 イベントを使おう

オブジェクトに関数を仕込む

const PROPERTY = {

     'alert' :function(){
alert(JSON.stringify,(this))
}
}

gui.add(PROPERTY, 'alert')


 値が変更されたときにイベントを発火させたい場合 onChange()

gui.add(オブジェクト名,'キー').onChange(function(){

callback();
})


 値が変更し終わったときにイベントを発火させたい場合 onFinishChange()

gui.add(オブジェクト名,'キー').onFinishChange(function(){

callback();
})


 UIをフォルダわけにする addFolder()

変数を作成

let Folder;

Folderの追加

// UI上にはfolderという名前で格納させる

Folder = gui.addFolder('folder')
//folderに格納するものを指定
Folder.add(オブジェクト名,'キー')

フォルダ分けした場合デフォルトだと閉じてる状態なので

Folder.open()

で開いてる状態にすることができる

ほかにも保存機能などいろいろあります

https://workshop.chromeexperiments.com/