Dat GUI
Video Lecture
Description
The Dat.GUI is another very useful tool that we can use to learn about Three.js as it allows us to quickly add a very basic user interface which allows us to interact with our 3d scene and the objects within it.
We can install the Dat.GUI
from its official repository.
npm install dat.gui --save-dev
We should also install the Dat.GUI
type definitions.
npm install @types/dat.gui --save-dev
Warning
Note that there was a problem with @types/dat.gui@0.7.9
which caused auto inferring Three.js types to no longer work. This made the definition very hard work with. This was corrected in @types/dat.gui@0.7.10
. Ensure you have the latest version. npm install @types/dat.gui@latest
Now add the import for it into our existing client.ts
script
1 2 3 4 5 6 7 |
|
See video for the rest of the instructions setting up the basic first example as shown in the working example at the top of this page.
Final Script
Below is the client.ts
how it is left at the end of the lesson.
./src/client/client.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
|
Boilerplate statsgui
Branch
The official course boilerplate contains a branch including both the Stats
and Dat.gui
panels if you need.
You can clone the boilerplate into a new folder somewhere and checkout the statsgui
branch.
git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
git checkout statsgui
npm install
npm run dev
Visit http://127.0.0.1:8080/
Troubleshooting
ERROR : Module not found: Error: Can't resolve 'three/examples/jsm/libs/dat.gui.module'
You may be using THREE r135 or later with an older version of my code.
Dat.GUI
was removed from the official installation of Three.js since THREE r135 and I have since updated all my example code in this course to account for that.
So, you either can install a version of Three.js before r135
npm install three@0.134.0 --save-dev
npm install @types/three@0.134.0 --save-dev
Or
Install Dat.GUI
manually from its official repository.
npm install dat.gui --save-dev
npm install @types/dat.gui --save-dev
Then change any scripts that reference Dat.GUI
in the form of,
import { GUI } from 'three/examples/jsm/libs/dat.gui.module'`
to
import { GUI } from 'dat.gui'
ERROR : Argument of type 'Euler' is not assignable to parameter of type 'Record'.
The type definitions, @types/dat.gui@0.7.8
and greater no longer support auto inference of Three.js types.
This makes the Dat.GUI
type definitions much more complicated to use in Three.js TypeScript projects.
You can either install a previous version of the type definitions,
npm install @types/dat.gui@0.7.7 --save-dev
Or, install lil-gui
.
lil-gui
is a drop-in replacement for Dat.GUI
, and the types are automatically installed by default when installing lil-gui
. They are also much more user-friendly, similar to the older @types/dat.gui@0.7.7
type definitions.
Install lil-gui
npm install lil-gui
Then in your client.ts
Change,
import { GUI } from 'dat.gui'
to
import { GUI } from 'lil-gui'
All the rest of the existing GUI code stays the same.
The official Threejs examples currently use lil-gui
.