将dat.GUI严格放置在THREE.js场景中，无需<iframe>

Question

当THREE.js场景占据整个html页面时，dat.GUI被强制在场景内，如this。

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

如何将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); 

添加一个空div id为my-gui-container然后使用上面的代码应该让你把它anwhere你想拍摄。

如果您希望dat.GUI和iframe如全屏一样显示，只需将iframe和my-gui-container div添加到另一个封闭div内的相同级别上，并设置适当的位置和z-索引即可。
例如。

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

HERE is a fiddle表明它。

注想法...
你dat.GUI将无法改变的iframe中的场景。