Combining Three.js with iFrame for a mix of WebGL and CSS3D

After some experimentation, I successfully created a dynamic page that seamlessly integrates WebGL and CSS3D (with valuable guidance from this helpful SO post). To add an extra touch, I included an iframe:

However, I noticed that the functionality to interact with the iframe is missing.

In comparison, Mrdoob's example of pure CSS3D in action allows scrolling through the pages and selecting text too:

It appears that having WebGL overlaying the CSS3D renderer is causing the interaction issue. Is there a workaround for this?

Appreciatively, Dirk

Answer №1

If you want events to pass through a WebGL node in CSS, you can use pointer-events:none according to this source. This allows events to reach the underlying CSS3D nodes and iframes seamlessly.

Currently, you have attached THREE.TrackballControls to the document itself, so no modifications are necessary there.

It's important to note that events on an iframe are sent directly to the iframe itself. The parent frame is unable to observe, intercept, or forward these events, or create synthetic ones. While mousewheel events have been an exception in Google Chrome, this may change soon (2016-Feb). To maintain smooth navigation control, one workaround is to cover the iframe with a transparent div when it's not being used. Remove this cover when user interaction with the iframe is anticipated, triggered by a click or based on the pointer's movement. You can split a click event sequence, with the parent handling the mousedown and revealing the iframe for the mouseup and click events - but keep in mind this method relies on the iframed site not reacting to the mousedown event.

Answer №2

It seems that the issue may be due to the iframe being obscured by another element that is intercepting mousewheel events, such as the canvas or a css3d div with trackball controls.

POTENTIAL SOLUTION 1

To address this, consider adding an invisible plane within the webgl scene that corresponds to the css3d object and listen for mousewheel events on the window instead. Upon detecting a mousewheel event, use a raycaster (refer to Mr. Doob's interactive objects examples) to determine if the invisible plane is being interacted with. Before adding the plane to the scene, associate the desired element to control as a property of the webgl plane that is intersected by the ray. This will facilitate easy retrieval of the element during intersection checks.

POTENTIAL SOLUTION 2

Alternatively, keep a reference point for the position of your iframe and calculate the distance to the iframe using THREE.Vector3().distanceTo(otherVector3). If the distance is sufficiently close, initiate scrolling for the iframe. Remember to continue monitoring mousewheel events on the window.

NOTE: It should be noted that this method enables partial interactivity for the iframe, specifically for captured events that can be triggered and passed along.

NOTE: Please be aware that scrolling cross-domain iframes is not supported...

Answer №3

Just wanted to share my experience with a possible solution for your issue. I recently tested this method and found that making the WEB GL RENDER'S dom element style invisible was the easiest fix for me.

If you have the Three.Vector2() properly configured, then you should be good to go. Hopefully, this tip will be helpful to you.

Check out this link for more information

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

Protractor sendKeys method on Modal dialog is failing due to element visibility issues

I seem to be facing a strange issue with protractor. My challenge lies in testing a form that is situated within a modal. Although I am able to verify that the modal is indeed open, I encounter difficulties when attempting to sendKeys to the input fields. ...

When attempting to add a new element to an array, the JSON key is mistakenly assigned a number instead of an array

I'm having trouble creating a JSON object that should look like this: { "sreddy-vm-1":["MyDatabase-1"], "sreddy-vm-2":["MyDatabase-2"], "sreddy-vm-3":["MyDatabase-3", "MyDatabase-4", "MyDatabase-5"] } However, the output I'm getting is diff ...

How float elements can affect z-index through opacity

While troubleshooting the alignment of my floated images, I came across an unexpected issue related to opacity: http://jsfiddle.net/tshwbnLo/ It appears that when an element has opacity, it does not adhere to the usual behavior and instead overlaps the f ...

The THREE.LineSegments - geometry.updateNeeded isn't refreshing

Hello, I'm having trouble updating my THREE.LineSegments using geometry.needsUpdate. In my animation, I am drawing a square side by side in a clockwise motion with each iteration. Even though I can see that the values of the side array are changing co ...

Creating a tree with branches using divs: a comprehensive guide

I have been tasked with designing a tree structure for a project that will visually represent the results of a quiz. The tree needs to have branches on both sides, featuring 4 main branches, each with 5 smaller branches extending from them. Additionally, I ...

Retrieve all posts from a specific category on a WordPress website using Node.js

Is there a way to retrieve all articles from the "parents" category on a WordPress website without just getting the html of the page? I need the full text of each article, not just a link with a "read more" button. I have tried using the nodejs plugin "w ...

What is the method to display HTML code using JavaScript within a span element in a JSP page?

While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...

Displaying a portion of a React functional component once an asynchronous function call has been successfully executed

I am currently using material-ui within a React function component and have implemented its Autocomplete feature. I have customized it so that when the text in the input field changes, I expect the component to display new search results. callAPI("xyz") I ...

What steps need to be taken to set up Node.js to accommodate requests from external sources beyond just localhost?

After creating an application using NextJs, I successfully built it and ran it on a node server by executing 'npm run start' in Powershell. Everything works perfectly when accessing it locally through port 80. However, my Windows Server 2019 does ...

What happens when you click on paper-tabs in a polymer?

Struggling to get click events to fire on <paper-tabs> and <paper-tab>. Interestingly, when manually adding event listeners in Chrome's developer tools, it works fine. But the same code doesn't seem to work in my application: // app. ...

What is the process for applying a class in jQuery to empty HTML elements?

Working on a WordPress/PHP website and looking to dynamically add a class when child elements are empty? This is the HTML structure: <div class="featured-block"> <a href="/" class="featured-block__item cf"> <div class="featured-bl ...

What could be causing my ajax post function to malfunction when triggered by a button click event?

My attempts to send variables to a PHP file via AJAX when a button is clicked have been unsuccessful. Upon checking my PHP page, I noticed that the variables were not being received. $(document).ready(function(){ $("#qryBtn").click(function(){ ...

Display a list exclusively with radio button options

Currently, I am developing a module that allows the admin to view a list of candidates who have requested approval. The interface includes radio buttons for three different selections and a submit button. However, I would like to update this functionality ...

Evolution of ReactJS state over time

When working with React, I wanted to increment a state variable called progressValue by 0.1 every 500 ms until it reaches 100. Here's what I initially tried: const [progressValue, setProgressValue] = React.useState<number>(0) const tick ...

Blank area located at the bottom of the document

I'm having trouble designing a webpage without a scroll bar because there isn't much content to display on the page. I've tried searching for solutions and following steps to fix the issue, but I haven't had any success. If anyone can a ...

Autocomplete feature integrated within search bar

I'm currently experimenting with merging MUI autocomplete and MUI searchbar to create a Searchbar that provides suggestions. I have attempted the following: https://codesandbox.io/s/material-demo-forked-cthpv import React from "react"; impo ...

Arrange the current div elements by utilizing jQuery sortable within an HTML document

Here is the HTML file I am working with: <div id="sortable"><div id="div1">Item 1</div> <div id="div2">Item 2 </div></div> I have successfully applied jQuery sortable to the div with id "sortable" and was able to sort ...

repeating the identical content in the same setting

I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing: My primary codes are <ul> <li> <a href=""> <i class="fa fa-facebook"></i> ...

Deploying a static website using Node.JS without relying on any frameworks

I am currently working on deploying static web pages, which include HTML, CSS, and JS files, onto Node.js without utilizing any frameworks such as Express. I started by placing all the necessary webpage files into a public folder and then called the index. ...

Is there a way to use Regex to strip the Authorization header from the logging output

After a recent discovery, I have come to realize that we are inadvertently logging the Authorization headers in our production log drain. Here is an example of what the output looks like: {"response":{"status":"rejected",&quo ...