双滚动反应-spring视差和反应三纤维`Canvas`

Double Scroll with react-spring parallax & react-three-fiber `Canvas`

我正在尝试使用 parallax 创建一个滚动框,但由于某些原因它不会与 Canvas 元素绑定,即使我将两者都包含在同一个 <div> 下.

在此屏幕截图中,您可以看到 div1 和 div2,其中每个都有自己的滚动功能...

在单独的 div 中尝试过

而且即使在同样的div下,还是摆脱不了双卷轴。有任何想法吗?

或者 react-spring parallaxreact-three-fiber 不兼容,这就是为什么有库 react-three-flex?

这里是codesandBox

您可以像这样将 canvas 作为新的 ParallaxLayer 移动到视差容器中 – https://codesandbox.io/s/sad-dewdney-r0c0u?file=/components/Parallax.js