javascript - Three.js - mixing WebGL and CSS3D with iFrame -

i prepared working page mixes webgl , css3d (with little here), , works great. throw in iframe measure:

but lacks ability interact iframe.

in mrdoobs pure css3d demo 1 can scroll pages , mark text etc:

as seems, combination of webgl in front of css3d renderer hinders interaction. there way around this?

thanks, dirk

you can apply css pointer-events:none webgl node, events go through reach underlying css3d nodes , iframe.

you attaching three.trackballcontrols document itself, no change needed there.

note events on iframe, dispatched directly iframe. parent frame cannot directly observe these, catch , forward them, or send synthetic ones. lose navigation control events while pointer on iframe. mousewheel events have been exception in google chrome (forked webkit), perhaps not longer (2016-feb). maintain smooth navigation control, 1 approach cover iframe (possibly gray) transparent div when it's "not in use". , remove cover when believe user wishes interact iframe, either because of click, or based on pointer's trajectory. click event sequence can split, parent catching mousedown, , uncovering leave mouseup , click events iframe - it's imperfect illusion, depending on the iframed site not care seeing mousedown.