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();
相关推荐
whysqwhw18 分钟前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端
dasseinzumtode33 分钟前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰36 分钟前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss36 分钟前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship40 分钟前
网页截图API-Npm工具包分享
前端
Jedi Hongbin1 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix1 小时前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法
光影少年1 小时前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
超人不会飛1 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
じòぴé南冸じょうげん1 小时前
微信小程序如何进行分包处理?
前端·小程序