1

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 Answer 1

2

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.

4
  • Did you try this? I tried it and it didn't work because it also moved the THREE.js scene.
    – user14717
    Dec 31, 2016 at 4:59
  • Ok, but the goal was to not use an iframe at all.
    – user14717
    Dec 31, 2016 at 17:47
  • I am not sure what you are trying to achieve, but, positioning the dat.GUI is the same as positioning any other html element.
    – 2pha
    Jan 1, 2017 at 14:58
  • 1
    use absolute positioning on HTML canvas with scene. position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 0;
    – Martin
    Jan 2, 2017 at 23:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.