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

Question

当我尝试在我的 WebGL window 上使用按钮和文本框呈现我的 dat.gui 时，我得到了这个：

dat.gui 的 "Close Controls" 部分显示了，但由于某些原因我的按钮和文本框没有显示。我使用 three.js 创建 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>

Answer 1

这是 dat.gui 中的错误。解决办法：不要用dat.gui，一般

很bug

Answer 2

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

...

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

...

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

dat.gui not rendering properly in WebGL window

javascript

webgl

three.js

dat.gui