# Zjbcool-GUI插件教程

GUI插件可以快速生成一个参数调试面板,它包含丰富的控件:文本、数字、滑块、按钮、单选框、拾色器、下拉菜单等。使用GUI插件,首先需要创建一个字典(对象),然后根据字典中的数据创建控件,最终实现通过控件控制场景中物体参数的目的。

示例程序 (opens new window)

# 加载脚本

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

# 准备数据

GUI面板中的所有控件都是根据数据生成的,这些数据就是我们需要调试的参数(如灯光强度,材质颜色,物体位移等等)。在拼图环境下,我们可以使用字典(Dictionaries)分类下的拼图创建数据。

首先,创建一个空字典(对象),并保存到data变量。

mark

然后,将要调节的参数和默认值添加到这个字典中。

mark

另外,你还可以使用高级(Advanced)分类下的exec script拼图更加快速地创建和设置数据。

mark

# 创建面板和折叠菜单

使用GUI插件中的create GUI拼图会在页面上创建一个空的面板。你可以选择将面板创建到container或body下面。

mark

默认新建的控件会被直接添加到面板上,如果控件过多,会显得杂乱,可以使用create folder拼图为一组控件创建折叠菜单。

mark

如果不使用折叠菜单,可以保持add controller拼图的to参数为空。

# 创建控件

# 文本控件

使用add controller拼图创建控件,类型为auto,数据为字典中的文本类型。

VARS.data = {
  name:'Cube', // ->文本控件(类型为auto)
...
}
1
2
3
4

mark

# 数字控件

使用add controller拼图创建控件,类型为auto,数据为字典中的数字类型。

VARS.data = {
  positionX: 0, // ->数字控件(类型为auto)
...
}
1
2
3
4

mark

# 单选框控件

使用add controller拼图创建控件,类型为auto,数据为字典中的布尔类型。

VARS.data = {
  visible: true, // ->单选框控件(类型为auto)
...
}
1
2
3
4

mark

# 按钮控件

使用add controller拼图创建控件,类型为auto,数据为字典中的函数(Procedures)类型。

VARS.data = {
  playAnimation: PROC.playAnimation;  // ->按钮控件(类型为auto)
...
}
1
2
3
4

点击按钮控件时,执行playAnimation函数(程序):

mark

mark

# 滑块控件

使用add controller拼图创建控件,类型为range,数据为字典中的数字类型,指定滑块的最小值(min)、最大值(max)和步进值(step)。

VARS.data = {
  positionX: 0, // ->滑块控件(类型为range)
...
}
1
2
3
4

mark

# 下拉菜单控件

使用add controller拼图创建控件,类型为dropdown,数据为字典中的列表(数组)或字典(对象)类型。

VARS.data = {
  hdr_url: VARS.option;  // ->下拉菜单控件(类型为dropdown)
...
}
1
2
3
4

mark

# 拾色器控件

使用add controller拼图创建控件,类型为colorPicker,数据为字典中的颜色类型。

VARS.data = {
  color: '#f00';  // ->拾色器控件(类型为colorPicker)
...
}
1
2
3
4

mark

# 控件事件

通过控件事件可以获取控件的当前值,从而控制场景中物体的各项参数。

on enent拼图接收一个控件作为参数,它有两个选项:changefinishChange,表示用户输入时和用户输入完成时。

# 双向绑定

通过get controller value 拼图和 set controller value 拼图可以获取和改变控件的值。使用这两拼图可以实现数据的双向绑定,即让控件和三维物体相互控制。比如,使用滑块控件控制立方体沿X轴移动,反过来,当拖动立方体时,滑块的值也跟着变化。

img

puzzle

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