Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

three.js
debugging
javascript
graphics
animation

What is dat.GUI in three.js?

Omer Kamran

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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'
//initialization
const 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])
  • object is the variable that the user needs to watch in the application.

  • property is 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>

RELATED TAGS

three.js
debugging
javascript
graphics
animation

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring