Integrate dat.GUI directly into a THREE.js scene without the use of an <iframe> tag

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.

javascriptiframethree.jsdat.gui

Answer №1

Referencing the dat.GUI documentation HERE

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

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

To customize the placement of dat.GUI, insert an empty div with the id specific-container, then implement the provided code snippet. With this method, you can position it anywhere according to your preference.

If you wish to display both dat.GUI and an iframe in fullscreen mode, place the iframe and specific-container divs at the same level within another container div, adjusting their positions and z-index values accordingly.
For example:

<div id="container-for-iframe-and-datgui">
  <div id="specific-container"></div>
  <iframe></iframe>
</div>

Explore a working demonstration on jsFiddle HERE.

IMPORTANT TO NOTE...
The dat.GUI functionality will be restricted if attempting to modify a scene within an iframe.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular Material md-menu element stubbornly refuses to close when clicked outside, especially if the target element has a fixed position and

I currently have a <md-menu> element implemented in my webpage. By default, the menu will close if clicked anywhere on the page. However, I have noticed that when clicking inside a fixed element with a specified z-index, the menu does not close. < ...

javascriptangularjsangularjs-material

Instant access to an interactive online platform

Is it feasible to create a shortcut from a webpage to my desktop for quick access? For instance, if a dynamic web page has 15 documents and I want to easily create shortcuts to them on my desktop by clicking on each one. I understand this is a brief quest ...

javascripthtmlasp-classic

Using jQuery's AJAX function to send a POST request and extracting data from the response

Below is the jQuery AJAX call that I am using: $.ajax({ method: "POST", url: "/Agenda/Template", dataType: 'json', data: { "templateId": templateSelect.options[templateSelect.selectedIndex].value }, c ...

javascriptjqueryajax

How can I prevent text highlighting on a website?

Is there a way to lock the copy button on my site without restricting the save as button, which is activated by right click? I want users to be able to save the website as an HTML file, but prevent them from copying text. Can this be achieved using Javas ...

javascripthtmlcsslockingsites

Display hyperlink depending on spinner value

I stumbled upon this JavaScript spinner that displays a countdown feature, which I find quite interesting. The spinner counts down from 15 seconds. I'm curious if it's feasible to customize it so that if you land on a specific category like geogr ...

javascript

Troubleshooting: npx create-react-app displaying errors during installation

Encountering an error while trying to install create-react-app using npx. Seeking assistance on resolving this issue. My Node.js version is v16.14.2 and npm version is 8.5.0 Installing packages. This may take a few minutes. Installing react, react-dom, a ...

javascriptreactjsnpmnpx

Vue data set is displaying as undefined

Having an issue passing the value and index of an object to a vue method. The method successfully displays the value, but the index remains undefined. Looking for guidance on where the mistake might be. JAVASCRIPT: <div class="select is-info"> ...

javascriptvue.jsvuejs2vue-component

Creating a JSON File with an Illustrator Script

Currently, I've been working diligently on developing a system that allows me to export my swatches from Illustrator as a JSON object. This will greatly simplify the process of updating my App. By utilizing the illustrator scripting API, I've suc ...

javascriptjson

Vue Page fails to scroll down upon loading

I am facing a challenge with getting the page to automatically scroll down to the latest message upon loading. The function works perfectly when a new message is sent, as it scrolls down to the latest message instantly after sending. I've experimented ...

javascripthtmlfirebasevue.jsdom

Trigger the function upon successful completion of Stripe Checkout

I have a requirement in my Nodejs/Express API to execute a series of confirmation code once the checkout process is successfully completed in Stripe by the client. Below is the checkout function responsible for handling the checkout phase: // Checkout con ...

javascriptnode.jspostgresqlexpressstripe-payments

Error: CSS and JavaScript files cannot be found

Currently working with an Orchard Asp.net MVC 3 Project. Upon examining the source code in the browser, I notice all the JS and CSS files being referenced/imported. However, clicking on the URL for certain JS files located in the MediaLibrary or Modules f ...

javascriptcssasp.netasp.net-mvc-3orchardcms

Utilize a variable function in AngularJS

Within my app.js file, I have declared functions in the following manner: var func1 = function(v1,v2,v3) { . . } var func2 = function(v1,v2,v3) { . . } Moving on to my controller.js file: var action = ""; if(..) { action = 'func1';} ...

javascriptjqueryangularjs

Tips for integrating Google WebKit with AngularJS

Looking to enhance my application with Google WebKit functionality. My goal is to create a feature similar to Gmail's where hovering over the "+" symbol expands to display options such as "insert photos" and "insert links". I'm just starting out ...

javascriptangularjswebkit

Using jQuery to set the background-image on the body's after pseudo-element with CSS

I am currently utilizing body:after for setting the page wallpaper. body:after { background-image: url('assets/img/wallpapers/<?php echo $getWallpaperFile; ?>'); } CSS content: ' '; display: block; position: absolute; left: ...

javascriptjquerycss

Filter error - Unable to retrieve property 'toLowerCase' from null value

When filtering the input against the cached query result, I convert both the user input value and database values to lowercase for comparison. result = this.cachedResults.filter(f => f.prj.toLowerCase().indexOf((this.sV).toLowerCase()) !== -1); This ...

javascriptangulartypescriptangular7

Transform the appearance of several elements using querySelectorAll

When targeting class names in an HTML page with a checkbox using querySelectorAll, keep in mind that getElementByID only works with the first element. QuerySelectorAll displays a nodeList which might require some corrections - how can this be achieved? le ...

javascript

"Utilizing Socket.io to set up a customized room with specific

I am currently in the process of developing a multiplayer poker game using node.js and socket.io along with a redis adapter. Among the parameters I have for rooms are: name: string - Server Name, used for the lobby password: string - Server password, fo ...

javascriptnode.jssocketsredissocket.io

What is the method for executing a for loop in AngularJS without relying on HTML elements?

I'm creating an application in AngularJS where the structure requires me to execute a for each loop without using any HTML elements or div tags with ng-repeat. In Django, we typically use the following syntax: {% for item in list %} {{ item }} {% ...

javascriptangularjsdjango

Discover the step-by-step process of attaching middleware to events within socket.io

Is there a way to intercept middleware in Socket.io before passing it to an event handler similar to how it's done in expressjs? In other words.... In express.js you can use: app.get('/', middleware1, middleware2, function(req, res){ ...

javascriptnode.jsexpresswebsocketsocket.io

What is your strategy for managing errors when utilizing xui's xhr functionality?

Recently, I've been utilizing the code below to extract data from an external source. <script type="text/javascript"> xui.ready(function() { var url = 'http://www.domain.com/getData.aspx'; x$().xhr(url, ...

javascriptxmlhttprequestxui