When a THREE.js scene takes up the full html page, the dat.GUI
is embedded within the scene itself, as shown in this example. However, when the THREE.js scene does not occupy the entire page, positioning the dat.GUI
becomes more complicated.
The examples in the THREE.js documentation use <iframe>
tags to contain both the scene and the dat.GUI
, but this presents issues if you have set the X-Frame-Options: Deny
cookie.
Is there a way to position the THREE.js scene and the dat.GUI
together inside the same <div>
with their relative positioning maintained as if they were on the whole page? The solution mentioned in this answer does not work for me as it applies styling to both the scene and the dat.GUI
.