15 May 2021

How to use Threejs dat.GUI graphical UI to change the Javascript Variables?

In this post, I am going share with you a tool/Utility method that will help you to change javascript variable through meaningful User Interface UI componet.

dat.GUI is javascript framework which is used to manipulate the javascript parameter variables upon UI (User Interface).

Import dat.GUI

<script SRC="https://threejs.org/examples/js/libs/dat.gui.min.js"> <scrip>
Copy the above given CDN link to your webpage head section.

dat.GUI Usage Example

Under the dat.dui script CDN link, Create a new one script tag.
const GUI = new day.GUI(); 

var params = { 

    color : [ 0, 0, 0 ] 


For Color

gui.addColor(params, "color").name("Color").onChange(function (value){ 

// Value is an Array like [230, 3,55] 



No comments:

No Comments