Place dat.GUI strictly inside THREE.js scene without <iframe>

2.2k Views Asked by At

When a THREE.js scene is occupies the entirety of an html page, the dat.GUI is forced inside the scene, like this.

However, when the THREE.js scene does not take up the whole page, then placement of the dat.GUI becomes more awkward. The THREE.js docs place examples in <iframe> tags which then forces the dat.GUI inside the frame, and hence inside the THREE.js scene. This looks great, but for me it is a problem since I have set the X-Frame-Options: Deny cookie.

How can I place the THREE.js scene and the dat.GUI in the same <div> with the same relative positioning as they would be if they occupied the entire page? Note that this answer does not work for me, since the styling is applied both to the THREE.js scene and the dat.GUI.

1

There are 1 best solutions below

4
On

As taken from the dat.GUI docs HERE

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

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

Adding an empty div with the id my-gui-container then using the code above should allow you to place it anwhere you want.

If you want the dat.GUI and the iframe as they would appear if fullscreen, just add the iframe and my-gui-container divs on the same level inside another enclosing div and set the appropriate positions and z-indexes.
eg.

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

HERE is a fiddle that demonstrates it.

NOTE THOUGH...
Your dat.GUI will not be able to alter a scene in an iframe.