我准备了一个混合了 WebGL 和 CSS3D 的工作页面（在 SO here 的帮助下），效果很好。我投了一个iframe 以作好衡量：
但它缺乏与 iframe 交互的能力。
在 mrdoobs 中纯 CSS3D demo 甚至可以滚动页面和标记文本等：
看起来，WebGL 在CSS3D 渲染器前面的组合阻碍了交互。有没有办法解决这个问题？
谢谢， 德克
【问题讨论】：
标签： javascript html css three.js
好的，我不知道这是否会回答您的问题，但我刚刚完成了尝试。对我来说最简单的解决方案是使 WEB GL RENDER 的 dom 元素样式不可见。
只要设置了 Three.Vector2() 就可以了。我希望这会有所帮助。
http://adndevblog.typepad.com/cloud_and_mobile/2015/07/embedding-webpages-in-a-3d-threejs-scene.html
【讨论】：
您可以将applyCSSpointer-events:none 指向WebGL 节点，以便事件通过它到达底层的CSS3D 节点和iframe。
您当前正在将 THREE.TrackballControls 附加到文档本身，因此无需进行任何更改。
请注意，iframe 上的事件会直接分派到 iframe。父框架不能直接观察这些，捕获并转发它们，或者发送合成的。因此，当指针位于 iframe 上时，您会丢失导航控制事件。在 Google Chrome（分叉的 WebKit）中，鼠标滚轮事件是一个例外，但可能不会持续太久（2016 年至 2 月）。为了保持流畅的导航控制，一种方法是在“未使用”时用（可能是灰色的）透明 div 覆盖 iframe。当您认为用户希望与 iframe 交互时，请移除此覆盖，无论是因为单击还是基于指针的轨迹。可以拆分单击事件序列，父级捕获 mousedown，并发现离开 mouseup 和 iframe 的单击事件 - 但这是一个不完美的错觉，取决于 iframed 站点不关心看到 mousedown。
【讨论】：
问题很可能是 iframe 现在被另一个捕获鼠标滚轮事件的元素所覆盖（整个画布或带有轨迹球控件的 css3d div）。
如果是这种情况，您需要在 webgl 场景中放置一个与 css3d 对象匹配的不可见平面，并在窗口上监听鼠标滚轮事件。当鼠标滚轮事件发生时，使用 raycaster（参见 mr doob 交互式对象示例）查看您是否击中了这个不可见的平面。最后，在将平面添加到场景之前，您应该添加要控制的元素作为被射线击中的 webgl 平面的属性。这样您就可以轻松地从相交处查找它。
跟踪 iframe 所在的点，并使用 THREE.Vector3().distanceTo(otherVector3) 测量到 iframe 的距离。如果它足够接近，则滚动 iframe。您仍然需要在窗口上监听鼠标滚轮事件。
注意：这不会使 iframe 完全交互，仅适用于您捕获然后触发/传递的事件。
注意：您不能滚动跨域 iframe...
【讨论】：