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();
相关推荐
A_ugust__23 分钟前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生25 分钟前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园28 分钟前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8282 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊2 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿5 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊5 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅6 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防6 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump6 小时前
前端部署工具 PinMe
运维·前端·开源