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

Question

我准备了一个混合WebGL和CSS3D的工作页面（来自SO here的一点帮助），它运作得很好。我投入iframe表示好的措施：

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

在mrdoobs中，纯CSS3D demo甚至可以滚动页面并标记文字等：

看来，WebGL渲染器前面CSS3D的组合阻碍了互动。有办法解决这个问题吗？

谢谢，   德克

Answer 1

您可以向VTCompressionSessionRef videoEncoder; OSStatus err = VTCompressionSessionCreate(NULL, 1920, 1080, kCMVideoCodecType_H264, NULL, NULL, NULL, NULL, (__bridge void*)self, &videoEncoder); if (err != noErr) { NSLog(@"Error when creating compression session : %d", (int)err); } else { NSLog(@"All systems go!"); } 节点apply CSS指针事件：无，以便事件通过它来到达基础WebGL节点和iframe。

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

请注意，iframe上的事件会直接发送到iframe。父框架不能直接观察它们，捕获和转发它们，或发送合成框架。因此，当指针位于iframe上时，您将丢失导航控制事件。鼠标轮事件在Google Chrome（分叉的WebKit）中是一个例外，但可能不会持续更长时间（2016年 - 2月）。为了保持平滑的导航控制，一种方法是在“未使用”时用（可能是灰色的）透明div覆盖iframe。如果您认为用户希望通过点击或基于指针的轨迹与iframe进行交互，请移除此封面。点击事件序列可以被分割，父母捕捉到mousedown，并且发现留下鼠标并点击iframe的事件 - 但这是一个不完美的幻觉，取决于iframed网站不关心看到mousedown。

Answer 2

问题可能是iframe现在被捕获mousewheel事件的另一个元素（整个画布或带有轨迹球控件的css3d div）覆盖。

解决方案1 ​​

如果是这种情况，您需要在webgl场景中放置一个与css3d对象匹配的不可见平面，并在窗口上侦听鼠标滚轮事件。当发生鼠标滚轮事件时，请使用raycaster（请参阅mob doob交互式对象示例）以查看您是否正在击中此隐形平面。最后，在将平面添加到场景之前，您应该将要控制的元素添加为受光线击中的webgl平面的属性。通过这种方式，您可以轻松地从交叉点查找它。

解决方案2

跟踪iframe的位置，并使用THREE.Vector3（）。distanceTo（otherVector3）测量到iframe的距离。如果它足够接近，则滚动iframe。您仍然需要在窗口上侦听鼠标滚轮事件。

注意：这不会使iframe完全互动，仅针对您捕获的事件然后触发/传递。

注意：您无法滚动跨域iframe ...

Answer 3

好的，我不知道这是否会回答您的问题，但我刚刚完成了尝试。对我来说最简单的解决方案是使WEB GL RENDER＆＃39; Dom元素样式不可见。

只要你设置了Three.Vector2（）就可以了。我希望这会有所帮助。

http://adndevblog.typepad.com/cloud_and_mobile/2015/07/embedding-webpages-in-a-3d-threejs-scene.html