Introduction
We have created a simple library that will load animation textures by specifying an image file (gif/png/apng) file.
Repository
Frames are parsed using gifuct-js and UPNG.js. The frame parsing process has a large impact on the main thread, so it is executed on the web worker.
It can be used without preparing a sprited image.
Install
npm i animation-texture
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 ...
}
Demo
I believe there is still significant room for performance improvement.
Top comments (0)