dat.GUIをTHREE.jsシーンの中に置く<iframe>

Question

THREE.jsシーンがhtmlページ全体を占める場合、dat.GUIはthisのようにシーン内に強制されます。

しかし、THREE.jsシーンがページ全体を占めていない場合、dat.GUIの配置はより扱いにくくなります。 THREE.js docs例をタグに配置すると、dat.GUIがフレーム内に、したがってTHREE.jsシーン内に強制的に配置されます。これは素晴らしいですが、X-Frame-Options: DenyのCookieを設定して以来、私にとっては問題になります。

THREE.jsシーンとdat.GUIを同じ<div>に配置するには、ページ全体を占有しているのと同じ相対的な位置付けが必要ですか？スタイリングはTHREE.jsシーンとdat.GUIの両方に適用されるため、this answerは私にとっては機能しません。その後、あなたはそれはあなたが望むanwhere配置できるようにする必要があり、上記のコードを使用して、ID my-gui-containerで、空のdivを追加dat.GUIドキュメントHERE

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

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

から取られたよう

Answer 1

。

フルスクリーンで表示されるようにdat.GUIとiframeを表示するには、iframeとmy-gui-container divを別の囲みdivの同じレベルに追加し、適切な位置とzインデックスを設定します。
など。

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

HERE is a fiddleを示しています。

NOTEのTHOUGHT ...
あなたdat.GUIはiframe内のシーンを変更することはできません。