diff --git a/src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx b/src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx index 29ec2637..96eeaeb8 100644 --- a/src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx +++ b/src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx @@ -5,7 +5,7 @@ import { GLTFLoader } from 'three-stdlib'; import { Model } from 'src/components/Models/Model'; import { BaseModelProps } from 'src/types'; -import { useEmotion, useGltfLoader } from 'src/services'; +import { useEmotion, useGltfCachedLoader } from 'src/services'; import { Emotion } from 'src/components/Avatar/Avatar.component'; export interface MultipleAnimationModelProps extends BaseModelProps { @@ -30,7 +30,7 @@ export const MultipleAnimationModel: FC = ({ const [loadedAnimations, setLoadedAnimations] = useState>({}); const [activeAction, setActiveAction] = useState(null); - const { scene } = useGltfLoader(modelSrc); + const { scene } = useGltfCachedLoader(modelSrc); const { nodes } = useGraph(scene); useEffect(() => { diff --git a/src/services/Models.service.tsx b/src/services/Models.service.tsx index 64eb0070..c7296cb7 100644 --- a/src/services/Models.service.tsx +++ b/src/services/Models.service.tsx @@ -219,7 +219,21 @@ const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.5/'); loader.setDRACOLoader(dracoLoader); -export const useGltfLoader = (source: Blob | string): GLTF => { +export const useGltfLoader = (source: Blob | string): GLTF => + suspend( + async () => { + if (source instanceof Blob) { + const buffer = await source.arrayBuffer(); + return (await loader.parseAsync(buffer, '')) as unknown as GLTF; + } + + return loader.loadAsync(source); + }, + [source], + { lifespan: 100 } + ); + +export const useGltfCachedLoader = (source: Blob | string): GLTF => { const cachedGltf = useRef>(new Map()); return suspend(async (): Promise => {