0.1.20 • Published 5 months ago
animation-texture v0.1.20
animation-texture
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 -D animation-texture
Demo
Usage
import React, { useRef, useEffect } from "react";
import * as THREE from "three";
import { useAnimationTexture } from "animation-texture";
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 "animation-texture";
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.
0.1.20
5 months ago
0.1.19
5 months ago
0.1.17
5 months ago
0.1.18
5 months ago
0.1.16
5 months ago
0.1.10
5 months ago
0.1.11
5 months ago
0.1.12
5 months ago
0.1.13
5 months ago
0.1.14
5 months ago
0.1.15
5 months ago
0.1.8
5 months ago
0.1.7
5 months ago
0.1.9
5 months ago
0.1.4
5 months ago
0.1.3
5 months ago
0.1.6
5 months ago
0.1.5
5 months ago
0.1.2
5 months ago
0.1.0
5 months ago