What is dat.GUI in three.js?
Overview
We use three.js, a JavaScript library, for rendering animations on the web. It is built on top of WebGL.
Note: If you are unfamiliar with three.js, please follow this link to read more.
In Javascript, dat.GUI is a lightweight graphics controller API. It allows the user to manipulate variables easily and activate functions inside the application by providing a graphical controller interface.
This API is frequently used in three.js for making changes to a scene without having to refer directly to the code.
Syntax
import * as dat from 'dat.gui'//initializationconst gui = new dat.GUI();
Parameters
We can add variables to the GUI using the add method. The format is as follows:
gui.add(object, property, [min], [max], [step])
-
objectis the variable that the user needs to watch in the application. -
propertyis the property of the variable that needs to be changed. For example, cube.position is the object, and ‘x’ will be the object’s property. -
[min]is the minimum value to display for the GUI slider in the application. -
[max]is the maximum value to display for the GUI slider in the application. -
[step]is the amount increased or decreased as the slider is moved back and forth in the GUI.
Note: The parameters enclosed in square brackets are optional.
These optional parameters can also be set using the dot operator. Such as:
gui.add(box.position, 'x').min(-5).max(5).step(0.01)
We can also use the name method to add labels to the attributes.
gui.add(box.position, 'x', -5, 5, 0.01).name("X Position");
Example
Below is an example of the code discussed above. We can either slide the slider to adjust the position of the cube on the x-axis or type in an integer in the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
</head>
<body>
<canvas class="webgl"></canvas>
</body>
</html>Organize the interface
We can add folders inside the GUI to make it modular and compact. This allows us to control variables related to different aspects while staying organized. We can do this with the addFolder method.
Syntax
const folder = gui.addFolder("FolderName");
We can then open this folder to add the variables we want to modify:
folder.open();
folder.add(object, property, [min], [max], [step])
After we have made the additions, we can close the folder:
folder.close();
Note: If a folder is not open, additional objects cannot be added to it.
Example
Below is an example of a typical folder structure inside dat.GUI. The user can interact with different sliders and toggle other animations as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
</head>
<body>
<canvas class="webgl"></canvas>
</body>
</html>Free Resources
