Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99
Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

Dat GUI

Video Lecture

Dat GUI Dat GUI

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 version 0.7.7 of the Dat.GUI type definitions.

npm install @types/dat.gui@0.7.7 --save-dev

Warning

Do not install the @types/dat.gui@0.7.9. They no longer work with Three.js since they no longer auto infer any Three.js Types and thus makes them very complicated to get to work.

Now add the import for it into our existing client.ts script

1
2
3
4
5
6
7
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'dat.gui'

const scene = new THREE.Scene()
... etc

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
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'dat.gui'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.z = 2

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
//controls.addEventListener('change', render)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
})

const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

const stats = new Stats()
document.body.appendChild(stats.dom)

const gui = new GUI()
const cubeFolder = gui.addFolder('Cube')
cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2)
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2)
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2)
cubeFolder.open()
const cameraFolder = gui.addFolder('Camera')
cameraFolder.add(camera.position, 'z', 0, 10)
cameraFolder.open()

function animate() {
    requestAnimationFrame(animate)

    //cube.rotation.x += 0.01
    //cube.rotation.y += 0.01

    render()

    stats.update()
}

function render() {
    renderer.render(scene, camera)
}

animate()
//render()

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/

With the Stats and Dat.gui panels

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.