michalochman / react-pixi-fiber

Write PixiJS applications using React declarative style.
MIT License
858 stars 94 forks source link

Pointer Events don't fire at all #299

Closed SelfDevTV closed 1 year ago

SelfDevTV commented 1 year ago

My very simple example application doesn't fire the onpointerdown event at all:

import React, { useState, useCallback, useRef, useEffect } from "react";
import { Stage, Container, Sprite, usePixiTicker } from "react-pixi-fiber";
import { settings, SCALE_MODES, Texture } from "pixi.js";

settings.SCALE_MODE = SCALE_MODES.NEAREST;

const RotatingBunny = () => {
  const [rotation, setRotation] = useState(0);
  const [scale, setScale] = useState(3);

  usePixiTicker((delta) => delta && setRotation(rotation + 0.1 * delta));

  const handleClick = useCallback((e) => {
    console.log(e);
    setScale((scale) => scale * 2);
  }, []);

  return (
    <Sprite
      interactive
      pointerdown={handleClick}
      texture={Texture.from("./00.png")}
      scale={scale}
      rotation={rotation}
    />
  );
};

const PixiApp = () => {
  return (
    <Stage>
      <Container position={[250, 250]}>
        <RotatingBunny />
      </Container>
    </Stage>
  );
};

export default PixiApp;

When I click the sprite, it doesn't show a log message. The rotation (animation) works fine. Please help me.

michalochman commented 1 year ago

Hi @SelfDevTV, I cannot reproduce what you are saying, the log is shown file as you can see here https://codesandbox.io/s/react-pixi-fiber-issue-299-vd6qrn

Perhaps you have regular console logs filtered out in your development tools.

tuoxiansp commented 1 year ago

Met the same problem. Fixed by changing pixi version from v7 -> v6 .