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
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.