Three.js-將WebGL和CSS3D與iFrame混合

Question

我准備了一個混合了WebGL和CSS3D的工作頁面（ 這里有 SO的一點幫助），並且效果很好。 我投入iframe的目的很充分：

但是它缺乏與iframe進行交互的能力。

在mrdoobs中，純CSS3D 演示甚至可以滾動頁面和標記文本等：

看起來， WebGL在CSS3D渲染器之前的組合阻礙了交互。 有沒有解決的辦法？

謝謝，德克

Answer 1

您可以將 CSS指針事件：none應用於WebGL節點，以便事件通過它到達基礎CSS3D節點和iframe。

您當前正在將THREE.TrackballControls附加到文檔本身，因此不需要在那里進行任何更改。

請注意，iframe上的事件直接分配給iframe。 父框架無法直接觀察，捕獲和轉發它們或發送合成圖像。 因此，當指針懸停在iframe上時，您將丟失導航控制事件。 鼠標滾輪事件是Google Chrome （派生的WebKit）中的例外，但可能不會持續太久（2016年2月）。 為了保持流暢的導航控制，一種方法是在“不使用” iframe時用一個透明的div（可能是灰色）覆蓋它。 如果您認為用戶希望通過單擊或基於指針的軌跡與iframe進行交互，請移除此封面。 可以拆分單擊事件序列，讓父級捕獲鼠標按下，然后展開以保留iframe的mouseup和click事件-但這是一種不完美的錯覺，具體取決於iframed站點是否關心查看mousedown。

Answer 2

問題可能是iframe現在被捕獲鼠標滾輪事件的另一個元素所覆蓋（整個畫布或帶有軌跡球控件的css3d div）。

解決方案1

如果是這種情況，則需要在webgl場景中放置一個與css3d對象匹配的不可見平面，並在窗口上偵聽鼠標滾輪事件。 發生鼠標滾輪事件時，請使用射線播放器（請參見mr doob交互式對象示例），查看您是否正在擊中此不可見的平面。 最后，在將平面添加到場景之前，您應該添加要控制的元素作為被射線擊中的webgl平面的屬性。 這樣，您可以輕松地從相交處查找它。

解決方案2

跟蹤iframe的位置，並使用THREE.Vector3（）。distanceTo（otherVector3）測量到iframe的距離。 如果距離足夠近，請滾動iframe。 您仍然需要在窗口上偵聽鼠標滾輪事件。

注意：這不會使iframe完全互動，僅適用於您捕獲然后觸發/傳遞的事件。

注意：您無法滾動跨網域iframe ...

Answer 3

好的，我不知道這是否可以回答您的問題，但是我剛剛嘗試了一下。 對我來說，最簡單的解決方案是使WEB GL RENDER的dom元素樣式不可見。

只要您設置了Three.Vector2（），您就可以進行了。 我希望這有幫助。

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