Dat.gui
Import
import { GUI } from 'dat.gui'
Description
Using Dat.GUI with React Three Fiber.
Dat.gui
has been a trusted micro UI for vanilla JavaScript projects across the web for many years.
It is good to know that it can also be used in your R3F applications.
We can install Dat.GUI
from its official repository.
npm install dat.gui --save-dev
And optionally, if you need the type definitions,
npm install @types/dat.gui --save-dev
Add the import to your JSX
import { GUI } from 'dat.gui'
And in your component, you can create and use it in a useEffect.
function Box({ gui }) {
const ref = useRef()
useEffect(() => {
const gui = new GUI()
gui.add(ref.current.rotation, 'x', 0, Math.PI * 2)
gui.add(ref.current.rotation, 'y', 0, Math.PI * 2)
gui.add(ref.current.rotation, 'z', 0, Math.PI * 2)
return () => {
gui.destroy()
}
}, [])
return (
<mesh ref={ref}>
<boxGeometry />
<meshBasicMaterial color={0x00ff00} wireframe />
</mesh>
)
}
Be sure to destroy the GUI, as shown in the above example, in case the component JSX is ever refreshed. Otherwise, you could have multiple GUIs instantiated into your document.
Working Example
Sharing Dat.GUI Among Several Components
The above example is great if only one of your components need the Dat.GUI
and you can create it complete in the useEffect.
Below is an example where each object manages its own folder within one shared Dat.GUI
.
Working Example
Useful Links
Some examples using Dat.GUI
Squircle | sbcode.net |
Displacement Map | sbcode.net |
Object3D Hierarchy | sbcode.net |
Modify Geometry Attribute | sbcode.net |