https://github.com/activeguild/react-three-animation

A library supports image animation using react-three-fiber. The target files are APNG and GIFfiles.
https://github.com/activeguild/react-three-animation

animation apng gif react react-three-fiber texture threejs

Last synced: about 1 month ago
JSON representation

A library supports image animation using react-three-fiber. The target files are APNG and GIFfiles.

• Host: GitHub
• URL: https://github.com/activeguild/react-three-animation
• Owner: activeguild
• License: mit
• Created: 2023-12-07T01:35:09.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-01-13T16:13:08.000Z (10 months ago)
• Last Synced: 2024-09-29T05:22:20.053Z (about 1 month ago)
• Topics: animation, apng, gif, react, react-three-fiber, texture, threejs
• Language: JavaScript
• Homepage:
• Size: 1.21 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
react-three-animation ⚡ Welcome 😀




  



# 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

```bash

npm i react-three-animation

```

## Demo



## Usage

```ts

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 (

    

      

      

    

  );

}

```

#### Pre-load if necessary.

```ts

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](https://github.com/activeguild/react-three-animation/blob/main/.github/CONTRIBUTING.md) when building a site.

## License

This library is licensed under the [MIT license](https://github.com/activeguild/react-three-animation/blob/main/LICENSE).