How to use dat.gui with ReactJS and ThreeJS

Two flowers that represent ReactJS and ThreeJS side by side. Beneath them sits the text "dat.gui."

A step by step tutorial on creating UI that allows you to dynamically adapt a 3JS scene in realtime.

The proposed solution can be found on the main branch of our Open Source React, Typescript & ViteJS Starter Project.

git clone git@github.com:delasign/reactjs-3js-vitejs-starter-project.git

Step One: Setup the Project

A screenshot of Chrome showing that the plane is now using the shader that we offer in this tutorial.

Follow the tutorial below to learn how to setup a Typescript & ViteJS project that works with a GLSL shader.

Step Two: Add Dependencies

A screenshot of terminal showing you how to add the dat.gui dependencies.

In Terminal, with the current directory set to that of the project, add the dat.gui dependency using the line below:

yarn add dat.gui; yarn add @types/dat.gui

Step Three: Import dat.gui

A screenshot of VSCode showing you how to import dat.gui.

In the file that holds the ThreeJS scene, import dat.gui's component using the line below:

import { GUI } from 'dat.gui'

Step Four: Add GUI Constant

A screenshot of VSCode showing you how to create the gui constant. This adds the gui to the scene.

Add a new GUI constant to add the base controls to the scene.

const gui = new GUI()

Step Five: Setup the GUI

A screenshot of VSCode showing the code we used to add a color folder and sliders to change the color of the shader to the GUI.

Create a function that dictates what functionality the GUI has.

Step Six: Update UseEffect

A screenshot of VSCode showing you how to update the useEffect function to setup the GUI and to destroy it to avoid errors on hot reload.

Update the useEffect function to setup the GUI on load and destroy it on hot reload.

If you do not do this, you will either see multiple GUI or see errors that pertain to folders already existing.

Step Seven: Remove Strict Mode

A screenshot of VSCode showing you how to remove the React Strict Mode.

For dat.gui to work, you must remove the <React.StrictMode> from the file that links to the app.tsx.

In ViteJS this is the main.tsx, in ReactJS this is the index.tsx.

Step Eight: Test

A screenshot of Chrome showing the shader on a plane and how the shader looks different thanks to the change in colors that we created using the GUI.

Run the app and confirm that you can dynamically change the shader.

Looking to learn more about ReactJS and ThreeJS ?

Search our blog to find educational content on learning how to use ReactJS and ThreeJS.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.