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 type definitions.
npm install @types/dat.gui --save-dev
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 70 71 |
|
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
If you get the error,
Module not found: Error: Can't resolve 'three/examples/jsm/libs/dat.gui.module'
then you are probably using THREE r135 or later and an older version of my code.
Dat.GUI was removed from the official install of Three.js since THREE r135 and I have since updated all of the 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'