react-three-animation
TypeScript icon, indicating that this package has built-in type declarations

0.1.21Β β€’Β PublicΒ β€’Β Published

react-three-animation ⚑ Welcome πŸ˜€

GitHub Actions status

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.

Package Sidebar

Install

npm i react-three-animation

Weekly Downloads

2

Version

0.1.21

License

MIT

Unpacked Size

105 kB

Total Files

9

Last publish

Collaborators

  • mustache-master