How to alter a ThreeJS Color using dat.gui

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

Follow the tutorial below to learn how to setup a Typescript & ViteJS project that works with a GLSL shader whose R, G, B color values can be adapted using dat.gui.

In the project, create a new Typescript type for the hex code.

In the file that contains the scene, create a new hex color of the type declared in Step 2 and apply it to a shader or geometry using code similar to that found below.

Update the dat.gui to make use of a color which takes in the color declared in Step Three and through a listener applies it to a listener.

Sample code of how to do this is found below.

Run the app and confirm that you can dynamically change the color of the shader using a color picker.

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