交互式WebGL背景与svg图像分层ontop

Question

我想做一个背景WebGL页面，取决于鼠标在哪里，改变了图像的角度。 Layered ontop是一个SVG图像，具有多种形状。问题是，SVG是否有一个隐藏的画布（画板？），导致后台WebGL停止与鼠标交互。

我的问题：我怎么能有这么当鼠标在两个背景WebGL和鼠标交互的SVG与两个“层次”？换句话说，我希望鼠标与多层图层交互。

非常感谢。

Answer 1

您可以捕捉顶部SVG“层”上的鼠标位置坐标，并将它们存储为一个全局变量，你可以用它来使两个层的调整。

如果您不需要直接与SVG图层和鼠标进行交互，那么只需在整个SVG图层上使用pointer-events:none - 这将导致所有鼠标交互都落入底层的WebGL层。