交互式WebGL背景與svg圖像分層ontop

Question

我想做一個背景WebGL頁面，取決於鼠標在哪裏，改變了圖像的角度。 Layered ontop是一個SVG圖像，具有多種形狀。問題是，SVG是否有一個隱藏的畫布（畫板？），導致後臺WebGL停止與鼠標交互。

我的問題：我怎麼能有這麼當鼠標在兩個背景WebGL和鼠標交互的SVG與兩個「層次」？換句話說，我希望鼠標與多層圖層交互。

非常感謝。

Answer 1

您可以捕捉頂部SVG「層」上的鼠標位置座標，並將它們存儲爲一個全局變量，你可以用它來使兩個層的調整。

如果您不需要直接與SVG圖層和鼠標進行交互，那麼只需在整個SVG圖層上使用pointer-events:none - 這將導致所有鼠標交互都落入底層的WebGL層。