Dat GUI

Video Lecture

Description

We can also use third party libraries in our Threejs applications.

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 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@latest --save-dev

We should also install the latest dat.GUI type declarations.

npm install @types/dat.gui@latest --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

Lesson Script

./src/main.ts

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import Stats from 'three/addons/libs/stats.module.js'
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 = 1.5

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

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

new OrbitControls(camera, renderer.domElement)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshNormalMaterial({ wireframe: true })

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

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, 20)
cameraFolder.open()

function animate() {
  requestAnimationFrame(animate)

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

  renderer.render(scene, camera)

  stats.update()
}

animate()

Useful Links

dat.GUI (GitHub)

lil-gui (GitHub)

tweakpane (GitHub)

Fizzy Text Example (SBEDIT)

Comments