将dat.GUI严格放在没有<iframe>的THREE.js场景中

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (106)

当THREE.js场景占据整个html页面时,dat.GUI会强制进入场景,就像这样

但是,当THREE.js场景没有占据整个页面时,放置它dat.GUI会变得更加尴尬。所述three.js所文档代替实施例<iframe>的标签,然后迫使dat.GUI在框架内部,因此,内three.js所场景。这看起来很棒,但对我来说这是一个问题,因为我已经设置了X-Frame-Options: Denycookie。

我如何可以将three.js所现场和dat.GUI在同一<div>使用相同的相对定位,因为他们将是,如果他们占据了整个页面?请注意,这个答案对我不起作用,因为样式既适用于THREE.js场景,也适用于dat.GUI

提问于
用户回答回答于

从dat.GUI docs 这里取得

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

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

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

如果你想要全屏显示的dat.GUI和iframe,只需将iframe和my-gui-container div添加到另一个封闭div中的同一级别,并设置适当的位置和z-index。 例如。

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

这里是一个演示它的小提琴

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

扫码关注云+社区

领取腾讯云代金券