threejs中gui的用法总结

最新推荐文章于 2025-09-21 07:30:00 发布

原创最新推荐文章于 2025-09-21 07:30:00 发布 · 1.3w 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#threejs

threejs 专栏收录该内容

3 篇文章

订阅专栏

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));// 拖动条