将 Sprite 传递给 displacementFilter 的正确方法是什么？

Question

我正在尝试在 React 应用程序中使用来自 PixiJs 的位移过滤器，这是我的代码：

const Filter = withFilters(Container, {
    displacement: filters.DisplacementFilter,
})

<Filter displacement={{ displacement: displacementSprite.current }} scale={{ x: scaleX, y: 0 }}>
    <AppConsumer>{ app =>
            <Sprite
              onMount={setup(app)}
              ref={displacementSprite}
              image={ripple}
              anchor={0.5}
              x={app.renderer.width / 2}
              y={app.renderer.height / 2}
            />}
    </AppConsumer>
</Filter>

但我收到错误 Cannot set property 'renderable' of undefined，也许我遗漏了一些东西，因为我正试图通过 React Ref 传递 sprite。将 Sprite 传递给 displacementFilter 的正确方法是什么？

我正在使用@inlet/react-pixi 版本：^1.2.19 和 Pixi v5

Answer 1

问题已修复#218

<Filters displacement={{ construct: [MySprite], ...otherDisplacementMembers }}>
Note: The Displacement filter needs a sprite as a reference and it needs to be added to the scene else you'll get the no renderable error. Use a ready state and render the filters should do the trick though.

工作 codepen 感谢 Inlet（@inlet/react-pixi 的维护者）

将 Sprite 传递给 displacementFilter 的正确方法是什么？

What is the correct way to pass a Sprite to a displacementFilter?

reactjs

pixi.js