SVG (Raphaël) 与 WebGL (THREE.js) 叠加

Question

目前我正在使用 THREE.js 库来渲染 3D 场景，没有问题。

我想覆盖一个 SVG ，但是我有以下问题，最好用图片来说明：

如您所见，没有 WebGL（上图），我的 2D 元素渲染。红色条来自 Raphael (SVG)，灰色摇杆使用纯 Canvas 2D 上下文渲染。

使用底层 WebGL（下图），纯 Canvas 2D 上下文继续正常渲染，但 Raphael (SVG) 呈现底层 WebGL 的外观。然而，3D 视图表明层和位置是正确的。

这只是两种不兼容的渲染方法的情况，还是我可能会在某处更改设置。我更喜欢使用 Raphael 的 .onTouch 功能，但如果必须，我愿意回退到纯 Canvas 2D 上下文进行叠加。

Answer 1

看起来像 zIndex 问题。添加three.js domelement时，您将其添加到什么？

svg 是否在 dom 树的上方，而您将 webgl 附加在末尾？

webgl 是否绝对定位但 svg 不是？等等