Skip to content


 Zabbix
 Grafana
 Prometheus
 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 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 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
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
70
71
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 = 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)

    //stats.begin()
    //cube.rotation.x += 0.01
    //cube.rotation.y += 0.01
    //stats.end()

    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

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'