Место dat.GUI строго внутри сцены THREE.js без <iframe>

Question

Когда сценарий THREE.js занимает всю страницу html, dat.GUI принуждается внутри сцены, например this.

Однако, когда сценарий THREE.js не занимает всю страницу, размещение dat.GUI становится более неудобным. Примерами THREE.js docs являются теги , которые затем заставляют dat.GUI внутри кадра и, следовательно, внутри сцены THREE.js. Это выглядит великолепно, но для меня это проблема, так как я установил cookie X-Frame-Options: Deny.

Как разместить сцену 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 с идентификатором my-gui-container затем, используя код, приведенный выше позволит вам разместить его anwhere вы хотите.

Если вы хотите, чтобы dat.GUI и iframe, как они появлялись в полноэкранном режиме, просто добавьте div iframe и my-gui-контейнеры на том же уровне внутри другого закрывающего div и установите соответствующие позиции и z-индексы.
например.

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

HERE is a fiddle, который демонстрирует его.

ПРИМЕЧАНИЕ МЫСЛЬ ...
Ваш dat.GUI не сможет изменить сцену в IFRAME.