threejs中gui的用法總結

gui

爲了能夠快速地搭建three.js的交互ui，官方提供了一個GUI組件，通過簡單的語法學習就能夠使用。

下面我們就來學習如何使用

用法一

首先聲明一個對象，這個對象設置獲取一個交互UI的get和set的方法回調

var propsLocal = {
	 get Enabled() {
        return renderer.localClippingEnabled;
      },
    set Enabled(v) {
        renderer.localClippingEnabled = v;
      }
}

然後就就可以使用GUI來進行生成交互UI組件
生成一個panel組件版,然後將組件的對象添加到這個組件版，完成之後就能夠生成一個交互界面了。

 var gui = new GUI(),
 folderLocal = gui.addFolder("Local Clipping")
 folderLocal.add(propsLocal, "Enabled");

是不是很簡單？

• 拉動條
  不僅可以生成按鈕，也可以生成拉動條。
  同樣是上面同一個例子

  var gui = new GUI(),
    folderLocal = gui.addFolder("Local Clipping"),
    propsLocal = {
      get Enabled() {
        return renderer.value;
      },
      set Enabled(v) {
        renderer.value = v;
      }
    }
      folderLocal.add(propsLocal, "Enabled", 0.3, 1.25);// 後面多的2個參數是拉動條的最大和最小值

• 生成按鈕

  // 設置一個回調
  let params = {
  	btn :function (){
  	// do someThing
  	}
  }
   var gui = new GUI(),
  folderLocal = gui.addFolder("btn")
   folderLocal.add(params , "btn");
  

• 下拉表

  var gui = new GUI(),
  var statesFolder = gui.addFolder( 'States' );
  // 默認值設置
  var dropdown= { state: 'Walking' };
  //選項
  var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
  // 添加
  var clipCtrl = statesFolder.add( dropdown, 'state' ).options( states );
  // 設置點擊事件
  clipCtrl.onChange( function () {
  				// do something
  } );
  

  效果圖
  

用法二

本質都是一樣的，只是寫法不一樣而已。

var gui = new GUI();
var planeX = gui.addFolder("Local Clipping");
   planeX
     .add(params.planeX, "displayHelper")
     .onChange(v => (planeHelpers[0].visible = v));// 按鈕
     
  planeX
     .add(params.planeX, "constant")
     .min(-1)
     .max(1)
     .onChange(d => (planes[0].constant = d));// 拖動條