ReactPixi Support

[shotnothing]

Hi!

Is pixi-projection able to be used with ReactPixi?

Should I just put the Sprite2d as a child of a ReactPixi Container in a UseEffect? Sorry, I'm not very familiar with this stuff, still learning :( Appreaciate any help I can get!

[shotnothing]

for reference, this is what I tried so far

import { useState, useCallback, useRef, forwardRef, useEffect } from "react";
import { Texture, Loader } from 'pixi.js';
import { Stage, Container, Sprite, useTick } from "@pixi/react";
import { Sprite2d } from "pixi-projection";

const Tile = ({ x, y, zoom, url, size, scaling_factor=8}) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const containerSprite = new Sprite2d(
      Texture.from(url)
    );
    containerSprite.anchor.set(0.5);
    containerRef.current.addChild(containerSprite);
  }
  , [url]);

  return (
    <>
      <Container ref={containerRef} x={x * size} y={y * size} />
    </>
  );
};

export default Tile;

[jonlepage]

no you will need create your own component <Container3d/> but it you cant, you can do to convert method

const Tile = ({ x, y, zoom, url, size, scaling_factor=8}) => {
  const containerRef = useRef(null);

    useEffect( function convertContainerTo3D {
        containerRef.current?.convertTo3d(); // this will add 3d overload to container
    }
    , [containerRef.current] );

  useEffect(() => {
    const containerSprite = new Sprite2d(
      Texture.from(url)
    );
    containerSprite.anchor.set(0.5);
    containerRef.current.addChild(containerSprite);
  }
  , [url]);

  return (
    <>
      <Container ref={containerRef} x={x * size} y={y * size} />
    </>
  );
};