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
.
As taken from the dat.GUI docs HERE
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.
HERE is a fiddle that demonstrates it.
NOTE THOUGH...
Your dat.GUI will not be able to alter a scene in an iframe.