SpriteAnimator stopped displaying anything at version 9.116.0

[antiosh]

• three version: 0.170.0
• @react-three/fiber version: 8.17.10
• @react-three/drei version: 9.116.0
• node version: N/A
• npm (or yarn) version: N/A

Problem description:

In previous drei versions the SpriteAnimator component would display my sprite. But when changing to version 9.116.0 suddenly nothing seems to be displayed when using it.

Example at version 9.115.0 where a sprite is displayed:
https://codesandbox.io/p/sandbox/react-three-fiber-forked-nn48gz?file=%2Fsrc%2FApp.js

After no code changes and upgrading to 9.116.0, nothing is displayed:
https://codesandbox.io/p/sandbox/react-three-fiber-forked-x3y3hx?file=%2Fsrc%2FApp.js%3A10%2C10-10%2C24&workspaceId=ws_DAmJahDCmpYz2tZqQ5nCrb

Potentially introduced with this change: #2141
(Found by looking through: v9.115.0...v9.116.0)

Relevant code:

<Canvas>
        <SpriteAnimator
          position={[1, 0, 0]}
          visible={true}
          startFrame={0}
          numberOfFrames={30}
          autoPlay
          loop
          scale={1}
          textureImageURL="https://drei.pmnd.rs/cyclops.png"
          asSprite={true}
        />
 </Canvas>

Suggested solution:

Since this is a minor version upgrade I would expect that the changes are backward-compatible and do not include breaking changes.
If I am using the component incorrectly please let me know.

The usage seems to be inline with what is mentioned in the docs here: https://drei.docs.pmnd.rs/misc/sprite-animator#sprite-animator

Any help is appreciated!

[netgfx]

@antiosh We went through a very large overhaul to better support types so some things might have broken down, I'm not sure why that wouldn't appear, I need to do some deep investigation.

If you use useSpriteLoader though, which is the recommended way to go it works https://codesandbox.io/p/sandbox/react-three-fiber-forked-x3y3hx
(well it works as before but that still isn't animating properly it scrolls up, I need to look into that as well)

[antiosh]

@netgfx I see, thank you.

I am not sure I see the updated code you are referring to in that sandbox, you may need to fork it again?

And I wouldn't worry too much about that specific animation, I just found a random sprite sheet to use for the example and may not have put in the correct value for numberOfFrames

[netgfx]

@antiosh this should work: https://codesandbox.io/p/sandbox/react-three-fiber-sprite-animator-issue-yc54j5?file=%2Fsrc%2FApp.js%3A11%2C10
(Codesandbox share is acting up)

Adding the code here for reference:

// because hooks need to run inside Canvas
const Statics = () => {
  const { spriteObj: statics } = useSpriteLoader(
    "https://drei.pmnd.rs/cyclops.png",
    null,
    null,
    30
  );

  return (
    <SpriteAnimator
      position={[1, 0, 0]}
      visible={true}
      startFrame={0}
      numberOfFrames={30}
      autoPlay
      loop
      scale={1}
      spriteDataset={statics}
      asSprite={true}
    />
  );
};

const App = () => {
  return (
    <div className="webgl">
      <Canvas>
        <Statics />
      </Canvas>
    </div>
  );
};

You can also use this one to see different ways to load sprites and properties and stuff, I use it to test new features etc

https://codesandbox.io/p/sandbox/r3f-sprite-transition-forked-flp72y

[Melonman0]

@netgfx I don't see a useSpriteAnimator, did you mean useSpriteLoader?

[netgfx]

@netgfx I don't see a useSpriteAnimator, did you mean useSpriteLoader?

Yes thank you I corrected it