javascript - 将 dat.GUI 严格放置在 THREE.js 场景中，不使用 <iframe>

Question

当 THREE.js 场景占据整个 html 页面时，dat.GUI被强制进入场景，例如 this .

但是，当THREE.js场景不占据整个页面时，则放置dat.GUI变得更加尴尬。 THREE.js docs将示例放在 <iframe> 中标签然后强制 dat.GUI在框架内，因此在 THREE.js 场景内。这看起来很棒，但对我来说这是一个问题，因为我设置了 X-Frame-Options: Deny cookies 。

如何放置 THREE.js 场景和 dat.GUI同样<div>与占据整个页面时的相对位置相同吗？请注意this answer对我来说不起作用，因为样式同时应用于 THREE.js 场景和 dat.GUI .

Answer 1

取自 dat.GUI 文档 HERE

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

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

添加一个带有 id my-gui-container 的空 div，然后使用上面的代码应该允许您将其放置在您想要的位置。

如果您想要 dat.GUI 和 iframe 全屏显示，只需将 iframe 和 my-gui-container div 添加到另一个封闭 div 内的同一级别，并设置适当的位置和 z 索引。< br/> 例如。

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

HERE is a fiddle这证明了这一点。

请注意...
您的 dat.GUI 将无法更改 iframe 中的场景。