dat.GUI user input not working

Question

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.

for examples of using dat.gui with three.js, check out http://stemkoski.github.io/Three.js/ — Stemkoski, Jul 13 '13 at 02:10

score 9 · Answer 1 · answered Nov 22 '13 at 16:26

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'));

This helps with a most of the problems that can occur with orbit controls and dat.gui, but I don't think it solves the problem in question. Great advice though. — Max Strater, Apr 24 '14 at 18:04

score 9 · Answer 2 · answered Nov 28 '13 at 16:51

9

I have the some problem.

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

remove .listen() and it'll work.

answered Nov 28 '13 at 16:51

Sayris

1,060
10
10

Woah, don't know why that fixed it, but that's the solution. Thanks a ton. – Max Strater Apr 24 '14 at 18:02
1

I see the same problem. Is there a version of DAT GUI that has this issue fixed? – Luis B Aug 04 '15 at 06:33
Same problem here, but I'm not using `.listen()`. :( – ygormutti Feb 28 '16 at 01:43

score 2 · Answer 3 · answered Nov 22 '13 at 11:37

2

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.

answered Nov 22 '13 at 11:37

Culzean

349
3
13

I was using bare bones web and this fixed my problem, Thanks! z-index needed to be 0 because dat.gui was covered when ThreeJS window was at z-index 1 – Orbitus007 May 11 '16 at 23:51

score 2 · Answer 4 · answered Feb 28 '16 at 02:34

2

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.

answered Feb 28 '16 at 02:34

ygormutti

358
3
17

I was using bare bones web and this fixed my problem, Thanks! – Orbitus007 May 11 '16 at 23:40
z-index needed to be 0 because dat.gui was covered when ThreeJS window was at z-index 1...so this answer helped me figure that out – Orbitus007 May 11 '16 at 23:51

score 0 · Answer 5 · answered Apr 25 '19 at 22:47

0

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

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

answered Apr 25 '19 at 22:47

Jeremy Lynch

6,780
3
52
63

dat.GUI user input not working

5 Answers5