00:00/00:00
3:22
00:03:22

Shortcuts ⌨️

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

Unlock content 🔓

To get access to 72 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!

Want to learn more? 🖖

9%

That's the end of the free part 😔

To get access to 72 hours of video, a members-only Discord server and future updates, join us for only $95!

Next lesson
09.

Debug UI

Difficulty Medium

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:

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.

Want to learn more?

That's the end of the free part 😔

To get access to 72 hours of video, a members-only Discord server and future updates, join us for only $95!

How to use it 🤔

  • Download the Starter pack or Final project
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install to install dependencies
    (if your terminal warns you about vulnerabilities, ignore it)
  • Run npm run dev to launch the local server
    (project should open on your default browser automatically)
  • Start coding
  • The JS is located in src/script.js
  • The HTML is located in src/index.html
  • The CSS is located in src/style.css

If you get stuck and need help, join the members-only Discord server:

Discord