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 bination of WebGL in front of the CSS3D renderer hinders the interaction. Is there a way around this?

Thanks, Dirk

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 bination of WebGL in front of the CSS3D renderer hinders the interaction. Is there a way around this?

Thanks, Dirk

• javascript
• html
• css
• three.js

3 Answers 3

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.

The issues is likely that the iframe is now covered by another element capturing mousewheel events (the whole canvas or css3d div with trackball controls).

SOLUTION 1

If that is the case you need to put an invisible plane in the webgl scene that matches the css3d object and listen for mousewheel events on the window. When a mousewheel event occurs, use a raycaster (see mr doob interactive objects examples) to see if you're hitting this invisible plane. And finally before adding the plane to the scene, you should add the element you want to control as a property of the webgl plane that gets hit by the ray. This way you can easily look it up from the intersect.

SOLUTION 2

Keep track of a point where your iframe is, and measure the distance to the iframe using THREE.Vector3().distanceTo(otherVector3). If it's close enough then scroll the iframe. You still need to listen on the window for mousewheel events.

NOTE: This does not make the iframe FULLY interactive, only for the events you capture and then trigger / pass on.

NOTE: You cannot scroll cross domain iframes...

Ok, I don't know if this will answer your question, but I just finished trying this out. The simplest solution for me was to make the WEB GL RENDER'S dom element style invisible.

As long as you have the Three.Vector2() set up you're good to go. I hope this helps.

http://adndevblog.typepad./cloud_and_mobile/2015/07/embedding-webpages-in-a-3d-threejs-scene.html