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

Question

当我尝试在我的 WebGL 窗口顶部使用一个按钮和一个文本框来呈现我的 dat.gui 时，我得到了这个：

dat.gui 的“关闭控件”部分正在显示，但由于某种原因，我的按钮和文本框没有显示。我使用three.js 来创建WebGL 窗口。

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>

Answer 1

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

...

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

...

Answer 2

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