threejs中gui的用法总结
程序员文章站
2022-03-26 19:33:46
...
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个参数是拉动条的最大和最小值
用法二
本质都是一样的,只是写法不一样而已。
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));// 拖动条