0

When i try to render my dat.gui with a button and a textbox on top of my WebGL window i get this:

The button and the textbox is not showing

The "Close Controls" part of the dat.gui is showing, but for some reason my button and textbox is not. I use three.js to create the WebGL window.

function ini()
{
    this.button1 = function () { alert("HEJ"); };
    this.text1 = "Hallo World";
}

var gui = new dat.GUI({ autoPlace: false });
var div = document.getElementById('datGui');
div.appendChild(gui.domElement);
var i = new ini();
gui.add(i, "button1");
gui.add(i, "text1");
<div id="datGui">
 <canvas id="canvas" style="position: absolute; background-color: black; width: auto; "></canvas> 
</div>
Steffan Pallesen
  • 140
  • 1
  • 15
  • I think you are trying to restrict dat.GUI and it does not like it. Try removing these two lines: `var div = document.getElementById('datGui'); div.appendChild(gui.domElement);` – gaitat Oct 14 '15 at 12:52
  • removing those lines does make the dat.gui render correctly. However, dat.gui is no longer rendered inside the WebGL window. Instead it is rendered in the top-right corner of the website. The reason i wrote the two lines of code was to have dat.gui rendered inside of my WebGL window. – Steffan Pallesen Oct 14 '15 at 14:17
  • could it be that the z-index of the two elements are fighting? – gaitat Oct 14 '15 at 19:33
  • No, but that was also my first guess – Steffan Pallesen Oct 14 '15 at 19:44
  • you could try looking into this page http://threejs.org/docs/#Reference/Materials/MeshLambertMaterial that does render the dat.gui in the webgl window. – gaitat Oct 14 '15 at 19:46

2 Answers2

0

FWIW, this code pen demonstrates the zIndex effect on the document and dat gui rendering : https://codepen.io/ubermario/pen/PBpMNN/

...

document.getElementById("canvas").style.zIndex = "-1";

...

UberMario
  • 81
  • 1
  • 8
-2

It's a bug in dat.gui. Solution: Don't use dat.gui, it is very buggy in general

Steffan Pallesen
  • 140
  • 1
  • 15