在没有<iframe>的情况下，将dat.GUI严格放在THREE.js场景中
在没有<iframe>的情况下，将dat.GUI严格放在THREE.js场景中
提问于 2016-12-31 09:27:21
当THREE.js场景占据整个html页面时，dat.GUI被强制放在场景中，就像this一样。
然而，当THREE.js场景没有占据整个页面时，dat.GUI的放置就会变得更加笨拙。THREE.js docs将示例放在<iframe>标记中，然后强制dat.GUI位于框架内，从而在THREE.js场景内。这看起来很棒，但对我来说这是一个问题，因为我已经设置了X-Frame-Options: Deny cookie。
如果THREE.js场景和dat.GUI占据了整个页面，我如何才能将它们放置在相同的<div>中，并且具有相同的相对位置？请注意，this answer不适用于我，因为样式既应用于THREE.js场景，也应用于dat.GUI。
回答 1
Stack Overflow用户
发布于 2016-12-31 12:37:22
取自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，然后使用上面的代码，就可以把它放在你想放的地方了。
如果您希望iframe和iframe在全屏时显示，只需将iframe和my-gui- dat.GUI div添加到同一级别的另一个封闭div中，并设置适当的位置和z索引。
例如：
<div id="iframe-goes-in-here">
<div id="my-gui-container"></div>
<iframe></iframe>
</div>HERE is a fiddle演示了这一点。
尽管如此，NOTE ...
您的dat.GUI将无法更改iframe中的场景。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41404643
复制相关文章
相似问题