I'm currently working on a web application and I've decided to use dat.GUI for its simplicity.
My goal is to integrate dat.GUI into my three.js project so that users can input a search term, hit a button, and trigger a function based on the search term.
Right now, I have successfully created a variable called 'searchterm' and added it to the GUI. The GUI displays the value of the variable and updates when it changes, but I'm having trouble modifying the value. I've also included a field to adjust the intensity of a light in the scene using three.js. Dragging the bar to adjust the value works, but manually inputting a value does not.
The code snippet looks something like this:
var searchterm = '';
...
function init(){
....
var gui = new dat.GUI();
gui.add(light, 'intensity').min(1).max(10).listen();
gui.add(this, 'searchterm').listen();
}
If anyone has insights on why I'm unable to edit values or suggestions for other user-friendly GUI options, I would greatly appreciate it.