当前位置：首页 > 关注 > > 正文

Verge3D GUI插件教程

来源：个人图书馆-半天早晨    时间：2023-08-14 10:56:27

准备数据

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


(资料图)

首先，创建一个空字典（对象），并保存到data变量。

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

创建面板和折叠菜单

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

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

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

创建控件文本控件

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

VARS.data = {  name:"Cube", // ->文本控件（类型为auto）...}
数字控件

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

VARS.data = { positionX: 0, // ->数字控件（类型为auto）...}单选框控件

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

VARS.data = {  visible: true, // ->单选框控件（类型为auto）...}
按钮控件

使用add controller拼图创建控件，类型为auto，数据为字典中的函数（Procedures）类型。

VARS.data = { playAnimation: PROC.playAnimation; // ->按钮控件（类型为auto）...}

点击按钮控件时，执行playAnimation函数（程序）：

滑块控件

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

VARS.data = {  positionX: 0, // ->滑块控件（类型为range）...}
下拉菜单控件

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

VARS.data = { hdr_url: VARS.option; // ->下拉菜单控件（类型为dropdown）...}拾色器控件

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

VARS.data = {  color: "#f00";  // ->拾色器控件（类型为colorPicker）...}
控件事件

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

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

双向绑定

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

关键词：

上一篇：特斯拉再掀价格战，Model Y两款豪华车型下调1.4万元人民币

下一篇：最后一页

精心推荐

X 关闭

资讯

广东提出16条助企纾困措施 推动286家重点纾企100%对接

行业排行

X 关闭

产业