いちばんシンプルなdat.gui.jsの使い方

dat.guiは基本的には、データを動的に変更する為に使う。

リロードして、っていうのが面倒な場合に使える。使い方がややこしいのが多いので、シンプルに作る

#cdnで設置

html.html

<!-- CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js" type="text/javascript"></script>

#読み込み

html.js

window.onload = function() {
  const gui = new dat.GUI();
};

これで右上になんか矩形が表示されるはず。

#デバッグボタンを作ってみる

html.js

window.onload = function() {
  const gui = new dat.GUI();
  gui.add( params, 'debug' ).onChange( function() {
  	if(params.debug){
  		console.log("DEBUG MODE")
  	}else{
  		console.log("NORMAL MODE")
  	}
  });
};

let params = {
    debug: true
};

これで矩形にチェックボックスが入っているのが表示されるはず
実は上記が一番かきたかった事、使い方を説明するのに、変数モリモリのサンプル提示してんの多すぎて、ちょっとカロリーが必要そうだった。

#数値の変更のサンプルを作る

html.js

window.onload = function() {
    const gui = new dat.GUI();
    gui.add(params, 'debug').onChange(function() {
        if (params.debug) {
            console.log("DEBUG MODE")
        } else {
            console.log("NORMAL MODE")
        }
    });
    gui.add(params, 'x', -100, 100).onChange(function() {

    });
    gui.add(params, 'y', -100, 100).onChange(function() {

    });
    gui.add(params, 'z', -100, 100).onChange(function() {

    });
};

let params = {
    debug: true,
    x: 0,
    y: 0,
    z: 0
};

-100とか100って書いてる部分は最小値と最大値で設定しておくと、指定の範囲だけ動かせるUIもついてくるので制限なくても適当な値を入れておくと、簡易に変更しやすい。