react-three-animation

A library supports image animation using react-three-fiber. The target files are APNG and GIF files. If there is only one frame, a still image is displayed. The animate, pause, and reset methods can be called from the texture.

Install

npm i react-three-animation

Demo

Usage

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

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 "react-three-animation";

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

Principles of conduct

Please see the principles of conduct when building a site.

License

This library is licensed under the MIT license.