带有 svg 图像分层的交互式 WebGL 背景

Question

我正在尝试制作一个背景 WebGL 页面，它根据鼠标的位置改变图像的视角。层叠在上面的是具有多种形状的 SVG 图像。问题是，SVG 有一个不可见的 canvas（画板？）导致背景 WebGL 停止与鼠标交互。

我的问题：当鼠标悬停在背景 WebGL 和 SVG 上时，我怎样才能让鼠标与两者交互 'layers'？换句话说，我希望鼠标与多层交互。

非常感谢。

Answer 1

您可以捕获顶部 SVG 上的鼠标位置坐标 'layer' 并将它们存储为全局变量，您可以使用该变量对两个图层进行调整。

如果您不需要直接与 SVG 层和您的鼠标交互，那么只需在整个 SVG 上使用 pointer-events:none 'layer' - 这会导致所有鼠标交互都失败底层 WebGL 层。