Three.js Tutorial: The gui.js Library (Grouping)

Recommended: Add NSDT Scene Editor to your 3D toolchain

Other series of tools: NSDT Jianshi digital twin

gui.js library (grouping)

When there are many attributes that need to be controlled in the GUI interface, in order to avoid mixing, they can be properly grouped and managed, which is clearer.

The gui interface is not grouped

The gui interface is not grouped, and there is only one default general menu.

const gui = new GUI(); //创建GUI对象 
//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
    color: 0x00ffff,// 材质颜色
    specular: 0x111111,// 材质高光颜色
};


// 材质颜色color
gui.addColor(obj, 'color').onChange(function(value){
    material.color.set(value);
});
// 材质高光颜色specular
gui.addColor(obj, 'specular').onChange(function(value){
    material.specular.set(value);
});

// 环境光强度
gui.add(ambient, 'intensity',0,2);
// 平行光强度
gui.add(directionalLight, 'intensity',0,2);
// 平行光位置
gui.add(directionalLight.position, 'x',-400,400);
gui.add(directionalLight.position, 'y',-400,400);
gui.add(directionalLight.position, 'z',-400,400);

.addFolder()group

new GUI()Instantiate a gui object, and create a general menu by default. You .addFolder()can create a submenu through the method of the gui object. When you have many properties controlled by the GUI, you can use them .addFolder()to group them.

.addFolder()The returned subfolder object also has the .add(), .onChange(), .addColor()and so on properties of the gui object.

const gui = new GUI(); //创建GUI对象 
const obj = {
    color: 0x00ffff,// 材质颜色
};
// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();
// 材质颜色color
matFolder.addColor(obj, 'color').onChange(function(value){
    material.color.set(value);
});
// 材质高光颜色specular
matFolder.addColor(obj, 'specular').onChange(function(value){
    material.specular.set(value);
});

// 环境光子菜单
const ambientFolder = gui.addFolder('环境光');
// 环境光强度
ambientFolder.add(ambient, 'intensity',0,2);

// 平行光强度
dirFolder.add(directionalLight, 'intensity',0,2);
// 平行光位置
dirFolder.add(directionalLight.position, 'x',-400,400);
dirFolder.add(directionalLight.position, 'y',-400,400);
dirFolder.add(directionalLight.position, 'z',-400,400);

Closing .close()and expanding .open()the interface

gui.addFolder()The general menu or submenu created by the gui object can use code to control the closing or opening state of the interactive interface.

const gui = new GUI(); //创建GUI对象 
gui.close();//关闭菜单

// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();//关闭菜单

.addFolder()Matryoshka - sub-menu nested sub-menu

.addFolder()The created object also has .addFolder()properties and can continue to nest submenus.

// 平行光子菜单
const dirFolder = gui.addFolder('平行光');
dirFolder.close();//关闭菜单
// 平行光强度
dirFolder.add(directionalLight, 'intensity',0,2);
const dirFolder2 = dirFolder.addFolder('位置');//子菜单的子菜单
dirFolder2.close();//关闭菜单
// 平行光位置
dirFolder2.add(directionalLight.position, 'x',-400,400);
dirFolder2.add(directionalLight.position, 'y',-400,400);
dirFolder2.add(directionalLight.position, 'z',-400,400);

3D Modeling Learning Studio

Previous: Three.js tutorial: gui debugging 3-drop-down menu, radio button (mvrlink.com)

Next: Three.js Tutorial: Threejs Syntax Summary (mvrlink.com)