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(オブジェクト名,'キー')

を使う
オブジェクトに１６進数もしくは、配列を入れてあげる
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/