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

Question

我准备了一个混合了 WebGL 和 CSS3D 的工作页面(在 SO here 的帮助下)，效果很好。我扔了一个 iframe好的措施:

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

在 mrdoobs 中纯 CSS3D demo甚至可以滚动页面和标记文本等:

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

谢谢， 德克

Answer 1

您可以 apply CSS pointer-events:none 到 WebGL 节点，以便事件通过它到达底层 CSS3D 节点和 iframe。

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

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