dat.gui无法在WebGL窗口中正确呈现

Question

当我尝试使用按钮和文本框在我的WebGL窗口上渲染我的dat.gui时，我得到了这个：

＆＃34;关闭控件＆＃34; dat.gui的一部分显示，但由于某种原因，我的按钮和文本框不是。我使用three.js来创建WebGL窗口。

＆＃13;

＆＃13;

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

＆＃13;

<div id="datGui">
	<canvas id="canvas" style="position: absolute; background-color: black; width: auto; "></canvas> 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是dat.gui中的一个错误。解决方案：不要使用dat.gui，一般来说它非常错误

Answer 2

FWIW，此代码笔演示了zIndex对文档和dat gui渲染的作用：https://codepen.io/ubermario/pen/PBpMNN/

...

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

...