Animated texture library for react-three-fiber available in react's hooks base

Introduction

We have created a simple library that will load animation textures by specifying an image file (gif/png/apng) file.
Repository

Frames are parsed using gifuct-js and UPNG.js. The frame parsing process has a large impact on the main thread, so it is executed on the web worker.

It can be used without preparing a sprited image.

Install

npm i animation-texture

Usage

import React, { useRef, useEffect } from "react";
import * as THREE from "three";
import { useAnimationTexture } from "animation-texture";

interface Props {
  url: string;
}

export function Model({ url }: Props) {
  const { animationTexture } = useAnimationTexture({ url });
  const meshRef = useRef();

  useEffect(() => {
    if (meshRef.current && animationTexture) {
      meshRef.current.material.map = animationTexture;
      meshRef.current.material.needsUpdate = true;
    }
  }, [animationTexture]);

  return (
    <mesh ref={meshRef} position={new THREE.Vector3(0, 0, 0)}>
      <planeGeometry args={[1, 1]} />
      <meshBasicMaterial transparent side={THREE.FrontSide} />
    </mesh>
  );
}

Pre-load if necessary.

import React from "react";
import * as THREE from "three";
import { preLoad } from "animation-texture";

export default function App() {
  preLoad('/sample.png');
  return ...
}

Demo

I believe there is still significant room for performance improvement.