# Zjbcool-GUI

这类拼图用于生成参数调试界面,可以用它实时调试任何Verge3D支持的参数。比如,可以将灯光的位置、颜色、强度转化为控件,利用控件改变数值实时观察场景中的照明情况。使用GUI插件可以精细地调节参数,实时看到效果,并且可以很方便地在移动设备上调试。

mark

# load script

GUI插件基于dat.gui (opens new window)实现,需要在Init选项卡中用该拼图加载dat.gui.min.js

mark

或者,在你的.html文件中,使用<script>标签引入。

<script src='https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/libs/dat.gui.min.js'><script>
1

# create folder

该拼图用于初始化GUI界面,并创建折叠菜单用于组织控件。

mark

  • name 参数是折叠菜单的标题;
  • closed 参数控制折叠菜单是打开还是关闭状态,默认TRUE关闭状态。

# add controller

该拼图会根据提供的字典数据在界面上添加一个控件,并能根据数据类型转化为相应的控件。

mark

  • 第1个下拉菜单参数,用于选择控件类型:数据控件或拾色器控件;
  • to参数是将控件添加到界面中的折叠菜单下面;
  • in dict参数是一个字典类型的数据;
  • get key参数是字典的键(key),即要绑定的属性;
  • args的3个参数为可选参数:
    • 当3个参数都是空白时,会根据键(key)的类型生成文本控件、数字控件、单选框控件或按钮;
    • 当3个参数都是数字时,会生成滑块控件,3个参数分别代表最小值、最大值和步进值;
    • 当第1个参数为字典或列表,其它参数空白时,会生成下拉菜单组件。

你可以用exec script拼图创建字典数据:

VARS.data = {
  name:'Cube', // 文本控件
  positionX: 0, // 数字控件
  positionY: 0, // 滑块控件
  visible: true, // 单选框控件
  hdr:{
    light:'environment.hdr',
    dark:'environment1.hdr'
  },
  material:[  // 下拉菜单
    'blueMaterial',
    'greenMaterial',
    'redMaterial'
  ],
  color:'#ff0000', // 拾色器组件
  showName: function(){  // 按钮
    console.log(this.name);
    PROC.showName;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

然后,使用add controller拼图读取data中的数据,即可生成界面:

mark

mark

# on event

该拼图用于监听一个控件的状态,当控件参数正在发生改变或已完成改变时,执行do插槽中的拼图。通过get controller value拼图可实时获取当前控件的值。

mark

该拼图需要一个控件(通过add controller拼图生成)作为参数。

mark

# get controller value

获取控件的值,需要在on event拼图拼图的do插槽中执行。

mark

# set controller value

设置某个控件的值,参数分别是控件和值。

mark

上次更新: 2021/5/19 下午2:17:08