Animated textures with react-three-fibre

user_12841888 0
Viewed 1574

I am using the package three-plain-animator for animated textures to be shown in my mesh. I am using react-three-fibre instead of plain three.js and for some reason, it loads the texture but doesn't animate it. Here is my Sandbox to show what I mean. I even tried not using useLoader and copied the example supplied in the docs exactly:

const texturePath = 'https://i.imgur.com/Oj6RJV9.png';
const animator = new PlainAnimator(new THREE.TextureLoader().load(texturePath), 4, 4, 10, 10);
const texture = animator.init();

Does this package only work with plain three.js? or am I missing something?

react-three-fiber three.js reactjs
1 Answers

EDIT:

So @hpalu kindly pointed out that my previous answer wasn't the best as it leads to multiple loops being rendered at the same time which was visualized here when I tried to create hover events.

Here is @hpalu 's working sandbox with the updated code that utilizes useFrame which allows components to participate in the render function which is called 60 times/second.

As you can see here, the mouse event is working well with this code with no complications

Original answer:

Okay so from looking at the example provided in the documentation. It looks like I was missing the animator.animate() within the animate function. So I had to include this function within my sprite function export:

  const animate = () => {
    animator.animate();
    requestAnimationFrame(animate);
  };

And then in the return section I called the animate function:

  return (
    <>
      <mesh/>
      </mesh>
      {animate()}
    </>
  )

Here is my updated sandbox: link

user_128418880
Related