Question

160

Three.js - mixing WebGL and CSS3D with iFrame

rated 0 times [ 161] [ 1] / answers: 1 / hits: 5268 / 8 Years ago, fri, february 5, 2016, 12:00:00

I prepared a working page that mixes WebGL and CSS3D (with a little help from SO here), and it works great. I throw in an iframe for good measure:

But it lacks the ability to interact with the iframe.

In mrdoobs pure CSS3D demo one can even scroll the pages and mark text etc:

As it seems, the combination of WebGL in front of the CSS3D renderer hinders the interaction. Is there a way around this?

Thanks,
Dirk

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

answered 8 Years ago dannyc · Accepted Answer

You can apply CSS pointer-events:none to the WebGL node, so that events go through it to reach the underlying CSS3D nodes and iframe.

You are currently attaching THREE.TrackballControls to the document itself, so no change is needed there.

Note that events over an iframe, are dispatched directly to the iframe. The parent frame cannot directly observe these, catch and forward them, or send synthetic ones. So you lose navigation control events while the pointer is over an iframe. Mousewheel events have been an exception to this in Google Chrome (forked WebKit), but perhaps not for much longer (2016-Feb). To maintain smooth navigation control, one approach is to cover the iframe with a (possibly gray) transparent div when it's not in use. And remove this cover when you believe the user wishes to interact with the iframe, either because of a click, or based on the pointer's trajectory. A click event sequence can be split, with the parent catching the mousedown, and uncovering to leave the mouseup and click events for the iframe - but it's an imperfect illusion, depending on the the iframed site to not care about seeing the mousedown.