javascript - How do I change the location of the dat.gui dropdown?

Question

I am using dat.gui, and I would like to position it somewhere different than the top right, preferably at the top overlapping a three.js canvas, is this accomplished through commands, or is there some css that will do the trick?

Answer 1

You need some JavaScript and CSS to do this.

The GUI constructor can be passed a paramaters object. You can tell the control not to be autoplaced. You can also attach an element ID to make styling easier

var gui = new dat.GUI( { autoPlace: false } );
gui.domElement.id = 'gui';

And then the CSS to place it can be something like this:

#gui { position: absolute; top: 2px; left: 2px }