TypeError: DAT is undefined when using DAT.gui() in three.js

Question

I'm trying to use DAT.gui in my code to control camera on three.js

I include the following in index.html file.

<script type='text/javascript' src='../_libs/DAT.GUI.min.js'></script>

I make sure to get files from build folder

when I use the following code in my.js file

var gui = new DAT.GUI();
    gui.add(camera.position, 'x', -500,500).step(5);
    gui.add(camera.position, 'y', -500,500).step(5);
    gui.add(camera.position, 'z', 1000,5000).step(5);

I got the following error TypeError: DAT is undefined . I also tried to use dat.GUI in small letters but still the same problem. It seems that the my.js can't reach the DAT.GUI.min.js but why can reach other files.

Answer 1

It suppose to be lower case like this..

var gui = new dat.GUI();
    gui.add(camera.position, 'x', -500,500).step(5);
    gui.add(camera.position, 'y', -500,500).step(5);
    gui.add(camera.position, 'z', 1000,5000).step(5);

Now in upper case Like you did :

var gui = new DAT.GUI();
    gui.add(camera.position, 'x', -500,500).step(5);
    gui.add(camera.position, 'y', -500,500).step(5);
    gui.add(camera.position, 'z', 1000,5000).step(5);

Thats why it said DAT is undefined. Hope this helped!

EDIT

Um i just saw you tried dat lowercase.. Well the problem here is with minified javascript versions.. I really dont reccomend min.js... Can you try .js?

EDIT2

Um so this time, can you check by formatting all your code like this:

var params = {
    z: 100
}

gui.add(params, 'z', -500, 500).step(5).onChange(function(value) {
    camera.position.z = value;
});

If that dosent work ill need to have a plunker.

Answer 2

I was just having the same issue, and realized that in my index.html file, I was sourcing the dat.gui library after my main javascript file. Moving the dat.gui script src to before my main.js script src fixed this.