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: 12 months 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-13T16:13:08.000Z (about 2 years ago)
- Last Synced: 2025-04-05T00:35:02.554Z (about 1 year 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).