20. gui调试3-下拉菜单、单选框

前面通过.add()方法可以添加一个拖动条用来改变对象的某个属性,本文章给大家介绍.add()方法创建新的UI交互界面,比如下拉菜单、单选框。

.add()方法参数3和4数据类型:数字

格式:add(控制对象,对象具体属性,其他参数)

其他参数,可以一个或多个,数据类型也可以不同,gui会自动根据参数形式,自动生成对应的交互界面。

参数3和参数4,分别是一个数字 ,交互界面是一个鼠标可以拖动的拖动条,可以在一个区间改变属性的值

javascript 复制代码
// 参数3、参数4数据类型:数字(拖动条)
gui.add(obj, 'x', 0, 180).onChange(function (value) {
    mesh.position.x = value;
});

.add()方法参数3数据类型:数组

参数3是一个数组,生成交互界面是下拉菜单

javascript 复制代码
const obj = {
    scale: 0,
};
// 参数3数据类型:数组(下拉菜单)
gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
    mesh.position.y = value;
});

.add()方法参数3数据类型:对象

参数3是一个对象,生成交互界面是下拉菜单

javascript 复制代码
const obj = {
    scale: 0,
};
// 参数3数据类型:对象(下拉菜单)
gui.add(obj, 'scale', {
    left: -100,
    center: 0,
    right: 100
    // 左: -100,//可以用中文
    // 中: 0,
    // 右: 100
}).name('位置选择').onChange(function (value) {
    mesh.position.x = value;
});

.add()方法对应属性的数据类型:布尔值

如果.add()改变属性的对应的数据类型如果是布尔值,那么交互界面就是一个单选框。

javascript 复制代码
const obj = {
    bool: false,
};
// 改变的obj属性数据类型是布尔值,交互界面是单选框
gui.add(obj, 'bool').name('是否旋转');
javascript 复制代码
gui.add(obj, 'bool').onChange(function (value) {
    // 点击单选框,控制台打印obj.bool变化
    console.log('obj.bool',value);
});

.add()方法改变布尔值案例

控制一个对象是否旋转。

javascript 复制代码
gui.add(obj, 'bool').name('旋转动画');

// 渲染循环
function render() {
    // 当gui界面设置obj.bool为true,mesh执行旋转动画
    if (obj.bool) mesh.rotateY(0.01);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
小赖同学啊2 小时前
GIS地理信息系统建设:高精度3D建模
3d
烛阴2 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante4 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端