Introduction 00:00

An essential aspect of every creative project is to be able to tweak it easily. The developer (you) and other actors working on the project (like designers or even the client) must be able to change as many parameters as possible.

You have to take this into account for them to find the perfect color, speed, quantity, etc. for the best experience. You might even get unexpected results that look great.

First, we need a debug UI.

While you can create your own debug UI using HTML / CSS / JS, there are already multiple libraries:

• dat.GUI
• lil-gui
• control-panel
• ControlKit
• Uil
• Tweakpane
• Guify
• Oui

All of these can do what we want, but we will use lil-gui because it’s popular, maintained, and easy to use.

From dat.GUI to lil-gui 02:33

Initially, Three.js Journey exercises were all using dat.GUI.

For some time now, this library hasn’t been updated and NPM started to trigger vulnerability warnings when installing it. Those vulnerabilities have been fixed since then, but alternatives have started to show up and that’s how lil-gui has become increasingly popular as a drop-in replacement for dat.GUI. The added bonus is that it even has better features.

All Three.js Journey exercises are now using lil-gui, but you might notice references to dat.GUI in the videos. Just ignore them and use lil-gui the same way.

By the way, GUI stands for Graphical User Interface.

Example 04:05

You can find a pretty good example of debug UI in my portfolio. This UI only shows up when you add #debug to the URL.

https://bruno-simon.com/#debug

You can tweak the gravity, the colors, the speed, the elements’ position, etc.

While it took me a lot of time to create all those tweaks, the game would appear less balanced without it.

Setup 05:27

In the starter, we have our cube, but the dependencies don't include lil-gui. We will add it and create some tweaks.

Instantiating lil-gui 05:52

To add lil-gui to our project, we can use the dependency manager provided with Node.js called NPM (just like we did for GSAP in a previous lesson).

In your terminal (while the server is not running or by using another terminal window in the same folder) run npm install lil-gui

lil-gui is now available in the node_modules/ folder and we can import it into our script.js. Don't forget to relaunch the server:

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import gsap from 'gsap'
import GUI from 'lil-gui'

// ...

You can now instantiate lil-gui in a gui variable and we can do that at the very beginning, right after the imports:

/**
 * Debug
 */
const gui = new GUI()

In the rest of the course, you might see something more like this:

import * as dat from 'lil-gui'

// ...

const gui = new dat.GUI()

It basically boils down to the same thing. Feel free to use whatever solution you prefer.

The different types of tweaks 08:04

On the top right corner of the experience, you can see an empty panel. There are different types of tweaks you can add to that panel:

• Range —for numbers with minimum and maximum value
• Color —for colors with various formats
• Text —for simple texts
• Checkbox —for booleans (true or false)
• Select —for a choice from a list of values
• Button —to trigger functions

Let's cover some of these tweaks.

Range

The first tweak we are going to add is the range.