I am building a simple web application. As part of it I want to use dat.GUI since it seems to be the easiest way.

What I want to do: I am using three.js to display an object. Over this object I want some sort of GUI (currently using dat.GUI) which allows the user to input a search term and hit a button to then call a function which uses the search term.

So far, I have created a variable called search term and the added this to the GUI. This works fine and the value of the variable is displayed. The GUI is also able to listen to the variable and updates once it changes. But I am unable to modify the value. I also added a field to adjust the intensity of the a light I added to the szene in three.js. For this part of the GUI adjusting the value by dragging the bar works but trying to input a value does not.

Code 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();

}

Any help on why I can't edit the values or suggestions for other easy to use GUIs would be appreciated.

I am building a simple web application. As part of it I want to use dat.GUI since it seems to be the easiest way.

What I want to do: I am using three.js to display an object. Over this object I want some sort of GUI (currently using dat.GUI) which allows the user to input a search term and hit a button to then call a function which uses the search term.

So far, I have created a variable called search term and the added this to the GUI. This works fine and the value of the variable is displayed. The GUI is also able to listen to the variable and updates once it changes. But I am unable to modify the value. I also added a field to adjust the intensity of the a light I added to the szene in three.js. For this part of the GUI adjusting the value by dragging the bar works but trying to input a value does not.

Code 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();

}

Any help on why I can't edit the values or suggestions for other easy to use GUIs would be appreciated.

• javascript
• three.js
• dat.gui

• for examples of using dat.gui with three.js, check out stemkoski.github.io/Three.js – Stemkoski Commented Jul 13, 2013 at 2:10
• Those examples have the same problem. – Max Strater Commented Apr 24, 2014 at 17:59

5 Answers 5

Not sure if this will help, but this was the problem I was having. If you have any kind of camera controls associated with your three.js canvas, this could be interfering with the GUI. You would be able to adjust sliders, for example, but not edit text. When you attach controls to the three.js camera with, for example, new THREE.OrbitControls(camera);, make sure to specify the three.js dom element as the second parameter like this:

new THREE.OrbitControls(camera, document.getElementById('threeCanvas'));

I have the some problem.

It's coming from the " .listen()" function. It's buggy.

remove .listen() and it'll work.

The z order might be becoming wrong? I can't find anything easier to use than dat gui.

.main {
   z-index: 5;
}

Would make sure this element is at the front. Other than that I'm sure what the problem might be.

I've had the same problem. In my case it was caused by the following CSS:

span {
    margin: 0 10px;
}

Applying the style to a newly created class instead of span solved it.

In my case it was a z-index issue. I fixed this with the following:

.dg.ac {
  z-index: 1000 !important;
}