Three.js - 混合WebGL和CSS3D与iFrame [英] Three.js - mixing WebGL and CSS3D with iFrame

问题描述

我准备了一个工作页面，它混合 WebGL 和 CSS3D http://stackoverflow.com/questions/24681170/three-js-properly-blending-css3d-and-webgl/24688807#24688807\">在这里），它的工作伟大。我投入一个 iframe 来衡量：

但它缺乏与iframe交互的能力。

在mrdoobs pure CSS3D 演示，甚至可以滚动页面和标记文本等：

看起来， WebGL 在 CSS3D renderer阻碍了交互。有办法吗？

谢谢，
Dirk

解决方案>

您可以套用 CSS pointer-events：none到 WebGL 节点，以便事件通过它到达底层的 CSS3D

您目前正在将THREE.TrackballControls附加到文档本身，因此不需要进行任何更改。

请注意，iframe上的事件会直接分派给iframe。父帧不能直接观察这些，捕获和转发它们，或发送合成的。因此，当指针位于iframe上方时，您会失去导航控制事件。 Mousewheel活动在中例外Google Chrome （分叉的WebKit），但可能不会更长（2016年2月）。为了保持平滑的导航控制，一种方法是在未使用时用if（可能是灰色）透明div来覆盖iframe。如果您认为用户希望与iframe进行互动，或者是因为点击，或者根据指针的轨迹，请移除此封面。点击事件序列可以拆分，父级捕获mousedown，并且揭开以留下鼠标和点击iframe的事件 - 但这是一个不完美的错觉，这取决于iframed网站不在乎看到mousedown。 p>

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

解决方案

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.

这篇关于Three.js - 混合WebGL和CSS3D与iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！