lil-gui
Video Lecture
Description
Many Three.js projects may still use the dat.GUI, and this is because dat.GUI was the default GUI in the official Three.js examples from release 52 in 2012, up until release 135, when it was then replaced by lil-gui.
dat.GUI still works very well, but it is no longer maintained in case any libraries it depends upon also need updating.
In this lesson, we will migrate from using dat.GUI to using lil-gui.
lil-gui was designed as a drop-in replacement for dat.GUI.
Install lil-gui
When using lil-gui, you can either install it from its official repository, or use the version that is already included with the Three.js install.
To optionally install lil-gui from its official repository,
npm install lil-gui
Note that the type declarations are installed by default when installing lil-gui.
Import lil-gui
In your main.ts, if you installed using npm, then add this line,
import { GUI } from 'lil-gui'
or if you want to use the version that already comes with Three.js, then use this line,
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
or if your project doesn't support the addons alias, then use,
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
The usage of lil-gui compared to dat.GUI is mostly the same when migrating.
Note that all GUI folders are now open by default. You can use the folders close() method if want it closed when your application starts.
Uninstall dat.GUI
If you have dat.GUI installed in your package.json, and you no longer want it, then you can remove it by using the command,
npm uninstall dat.gui
If you also have the @types/dat.gui installed, you can remove them also using the command,
npm uninstall @types/dat.gui