GUI | www.techtalks.myglobalcenter.com

GUI is simplified version of a GUI library, to create a graphical interface for controlling aspects of a 3D scene.

Creating function GUI :
This code uses lil.GUI, a simplified GUI library, to create a user interface for controlling a 3D scene. It sets up three folders: 'Cube' for adjusting the rotation of a cube (x, y, z), 'Camera' to control the camera's z-coordinate (0 to 20), and 'Scale' for scaling the cube (x, y, z) with an option to toggle its visibility. Each folder is automatically opened for easy access to its controls when the GUI is shown it simplifies the adjustment of scene properties.

// Create a new GUI for managing scene controls
  const gui = new GUI();

// Create a folder named 'Cube' in the GUI
  const cubeFolder = gui.addFolder( 'Cube' )

// Add controls for rotating the cube along x, y, and z axes
   cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2)
   cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2)
   cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2)
   cubeFolder.open(); // Open the 'Cube' folder by default

// Create a folder named 'Camera' in the GUI
   const cameraFolder = gui.addFolder('Camera')

// Add a control for adjusting the camera's z-coordinate  
   cameraFolder.add(camera.position, 'z', 0, 20)

// Open the 'Camera' folder by default  
   cameraFolder.open()

// Create a folder named 'Scale' in the GUI
   const cubeScaleFolder = gui.addFolder('Scale')

// Add controls for scaling the cube along x, y, and z axes
   cubeScaleFolder.add(cube.scale, 'x', 0, 10)
   cubeScaleFolder.add(cube.scale, 'y', 0, 10)
   cubeScaleFolder.add(cube.scale, 'z', 0, 10)
   cubeScaleFolder.add(cube, 'visible', true)

// Open the 'Scale' folder by default
   cubeScaleFolder.open()

Return back to three.js-link page