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

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

当我尝试使用按钮和文本框在我的WebGL窗口上渲染我的dat.gui时,我得到:

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.

显示了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>

2 个解决方案

#1

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

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

#2

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

FWIW,这个代码笔演示了文档和数据gui渲染的zIndex效果:https://codepen.io/ubermario/pen/PBpMNN/

...

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

...

#1