PixiThree

Declarative 2D and 3D composition in React.

Combine the power of React Three Fiber and React Pixi to seamlessly compose 2d and 3d. Render dynamic 2d textures onto 3d objects. Integrate 3d objects into 2d scenes.

Docs | Github | NPM

Installation

npm i @astralarium/pixi-three pixi.js @pixi/react @react-three/fiber three

Usage

• <RenderContext>: Context manager for all canvas views, which share GPU resources. Contains DOM children, including CanvasView.

• <CanvasView>: A canvas DOM element. Contains React Pixi children.

• <ThreeScene>: A Pixi Sprite. Contains React Three Fiber children.

• <PixiTexture>: A Three TextureNode. Contains React Pixi children.

<RenderContext>
  <CanvasView>
    <ThreeScene>
      <SpinnyCube /> // Three.js Object
    </ThreeScene>
    <SpinnyStar /> // Pixi.js Graphic
  </CanvasView>
</RenderContext>

See examples on the documentation website

Development

pnpm install
pnpm dev

This project uses React Compiler.