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

【问题标题】：dat.gui not rendering properly in WebGL windowdat.gui 无法在 WebGL 窗口中正确呈现
【发布时间】：2018-07-24 01:01:46
【问题描述】：

当我尝试在我的 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>

【问题讨论】：

我认为您正在尝试限制 dat.GUI 并且它不喜欢它。尝试删除这两行：var div = document.getElementById('datGui'); div.appendChild(gui.domElement);
删除这些行确实会使 dat.gui 正确呈现。但是，dat.gui 不再呈现在 WebGL 窗口中。相反，它呈现在网站的右上角。我写这两行代码的原因是让 dat.gui 在我的 WebGL 窗口中呈现。
会不会是两个元素的z-index打架了？
不，但这也是我的第一个猜测
您可以尝试查看此页面threejs.org/docs/#Reference/Materials/MeshLambertMaterial，它确实在 webgl 窗口中呈现 dat.gui。

标签： javascript three.js webgl dat.gui

【解决方案1】：

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

...

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

...

【讨论】：

【解决方案2】：

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

【讨论】：