Three.js tutorial: gui debugging interface 2

Recommended: Add NSDT Scene Editor to your 3D toolchain

Other series of tools: NSDT Jianshi digital twin

gui debugging interface 2-color naming, etc.

This lesson combines threejs to introduce more methods of gui.js library.

.name()method

.add()The created interactive interface will display the name of the changed property by default. In order to better understand the property of an object you changed through the interactive interface, you can use the method to .name()change the displayed content of the gui generated interactive interface.

const gui = new GUI();//创建GUI对象 
gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度');
gui.add(directionalLight, 'intensity', 0, 2.0).name('平行光强度');

step size .step()method

The step .step()method can set the interval between each change of the property value in the interactive interface.

gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度').step(0.1);

.onChange()method

When the gui interface has a certain value, .onChange()the method will be executed. At this time, you can .onChange()execute some codes as needed.

const obj = {
    x: 30,
};
// 当obj的x属性变化的时候，就把此时obj.x的值value赋值给mesh的x坐标
gui.add(obj, 'x', 0, 180).onChange(function(value){
    mesh.position.x = value;
	// 你可以写任何你想跟着obj.x同步变化的代码
	// 比如mesh.position.y = value;
});

.addColor()color value change

.addColor()Generate an interactive interface for changing color values

const obj = {
    color:0x00ffff,
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, 'color').onChange(function(value){
    mesh.material.color.set(value);
});

3D Modeling Learning Studio

Previous: Three.js Tutorial: gui.js library (visually changing 3D scenes) (mvrlink.com)

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