Three.js Tutorial: GUI Debugging 3

Recommended: Add NSDT Scene Editor to your 3D toolchain

Other series of tools: NSDT Jianshi digital twin

gui debugging 3-drop-down menu, radio button

You have learned before that .add()you can add a drag bar to change a certain attribute of an object through the method. This lesson will introduce you to .add()the method to create a new UI interface, such as a drop-down menu and a radio button.

.add()Method parameter 3 and 4 data type: number

Format:add(控制对象，对象具体属性，其他参数)

Other parameters can be one or more, and the data types can also be different. Gui will automatically generate the corresponding interactive interface according to the parameter form.

Parameter 3 and parameter 4 are a number respectively. The interactive interface is a drag bar that can be dragged by the mouse , and the value of the property can be changed in a range

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

.add()Method parameter 3 data type: array

Parameter 3 is an array , and the generated interactive interface is a drop-down menu

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

.add()Method parameter 3 data type: object

Parameter 3 is an object , and the generated interactive interface is a drop-down menu

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()The data type of the corresponding property of the method: Boolean

If .add()the corresponding data type of the changed attribute is a Boolean value, then the interactive interface is a check box.

const obj = {
    bool: false,
};
// 改变的obj属性数据类型是布尔值，交互界面是单选框
gui.add(obj, 'bool').name('是否旋转');

gui.add(obj, 'bool').onChange(function (value) {
    // 点击单选框，控制台打印obj.bool变化
    console.log('obj.bool',value);
});

.add()method change boolean case

Controls whether an object is rotated.

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();

3D Modeling Learning Studio

Previous: Three.js tutorial: gui debugging interface 2-color naming, etc. (mvrlink.com)

Next: Three.js Tutorial: gui.js library (grouping) (mvrlink.com)