Javascript 将dat.GUI严格放置在THREE.js场景中，不带<；iframe>；

当THREE.js场景占据整个html页面时，

dat.GUI

会强制进入场景中，如下图所示

但是，当THREE.js场景不占据整个页面时，

dat.GUI

的位置会变得更加尴尬。将示例放置在

标记中，然后将

dat.GUI

强制置于框架内，从而强制置于THREE.js场景内。这看起来很棒，但对我来说这是个问题，因为我已经设置了

X-Frame-Options:Deny

cookie

---

如何将THREE.js场景和

dat.GUI

放在同一个

中，并与它们占据整个页面时的相对位置相同？请注意，这对我不起作用，因为样式同时应用于THREE.js场景和取自dat.GUI文档的

dat.GUI

添加一个id为

mygui容器的空div

，然后使用上面的代码应该允许您将其放置在所需的位置

如果希望dat.GUI和iframe在全屏显示时显示，只需将iframe和my GUI容器div添加到另一个封闭div的同一级别上，并设置适当的位置和z索引。
例如

这就证明了这一点

注意…

---

您的dat.GUI将无法更改iframe中的场景

你试过这个吗？我试过了，但没有成功，因为它还移动了THREE.js场景。好的，但目标是根本不使用iframe。我不确定您想要实现什么，但是，定位dat.GUI与定位任何其他html元素是一样的。请在html画布上使用场景的绝对定位。位置：固定；排名：0；左：0；右：0；身高：0；z指数：0；

var gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);

<div id="iframe-goes-in-here">
  <div id="my-gui-container"></div>
  <iframe></iframe>
</div>