Three.js - 将 WebGL 和 CSS3D 与 iFrame 混合

Question

我准备了一个混合了WebGL和 的工作页面（在 SO这里CSS3D的一点帮助下），并且效果很好。为了更好地衡量，我添加了一个iframe：

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

在 mrdoobs pure CSS3D demo中，人们甚至可以滚动页面并标记文本等：

看起来，渲染器WebGL前面的组合CSS3D阻碍了交互。有没有解决的办法？

谢谢，德克

Answer 1

您可以将 CSSpointer-events:none应用于节点WebGL，以便事件通过它到达底层CSS3D节点和iframe。

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

请注意，iframe 上的事件将直接分派到 iframe。父框架无法直接观察这些、捕获并转发它们或发送合成的。因此，当指针位于 iframe 上时，您会丢失导航控制事件。鼠标滚轮事件在Google Chrome （分叉的 WebKit）中是一个例外，但可能不会持续太久（2016 年 - 2 月）。为了保持流畅的导航控制，一种方法是在“未使用”时用（可能是灰色的）透明 div 覆盖 iframe。当您认为用户希望与 iframe 进行交互（无论是由于单击还是基于指针的轨迹）时，请移除此盖子。单击事件序列可以被拆分，父级捕获 mousedown，并发现将 mouseup 和单击事件留给 iframe - 但这是一个不完美的幻觉，具体取决于 iframe 站点不关心看到 mousedown。