fix: spriteAnimator change frame bug (#1814)

* fix: cached frame when changing animation sequence

* fix for useSpriteLoader

src/core/SpriteAnimator.tsx

@@ -168,12 +168,12 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = /* @__PURE__ */ Rea
       }
     }, [autoPlay])
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       if (currentFrameName.current !== frameName && frameName) {
         currentFrame.current = 0
         currentFrameName.current = frameName
         state.hasEnded = false
-        modifySpritePosition()
+        // modifySpritePosition()
         if (spriteData.current) {
           const { w, h } = getFirstItem(spriteData.current.frames).sourceSize
           const _aspect = calculateAspectRatio(w, h)
@@ -389,7 +389,6 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = /* @__PURE__ */ Rea
         frameIndex = Math.max(0, Math.min(frameIndex, spriteFrames.length - 1))
 
         if (isNaN(frameIndex)) {
-          console.log('nan frame detected')
           frameIndex = 0 //fallback
         }
         currentFrame.current = frameIndex
@@ -449,7 +448,7 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = /* @__PURE__ */ Rea
             )}
             {!displayAsSprite && (
               <Instances
-                limit={maxItems} // Optional: max amount of items (for calculating buffer size)
+                limit={maxItems ?? 1} // Optional: max amount of items (for calculating buffer size)
               >
                 <planeGeometry args={[1, 1]} />
                 <meshBasicMaterial

src/core/useSpriteLoader.tsx

@@ -1,6 +1,6 @@
 import { Texture, TextureLoader } from 'three'
 import { useLoader, useThree } from '@react-three/fiber'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import * as React from 'react'
 import * as THREE from 'three'
 
@@ -44,7 +44,6 @@ export function useSpriteLoader<Url extends string>(
   onLoad?: (texture: Texture, textureData?: any) => void
 ): any {
   const v = useThree((state) => state.viewport)
-  const gl = useThree((state) => state.gl)
   const spriteDataRef = React.useRef<any>(null)
   const totalFrames = React.useRef<number>(0)
   const aspectFactor = 0.1
@@ -201,16 +200,6 @@ export function useSpriteLoader<Url extends string>(
     onLoad?.(spriteTexture, spriteData)
   }, [spriteTexture, spriteData])
 
-  // https://github.com/mrdoob/three.js/issues/22696
-  // Upload the texture to the GPU immediately instead of waiting for the first render
-  // NOTE: only available for WebGLRenderer
-  useEffect(() => {
-    if ('initTexture' in gl) {
-      const array = Array.isArray(spriteTexture) ? spriteTexture : [spriteTexture]
-      array.forEach(gl.initTexture)
-    }
-  }, [gl, spriteTexture])
-
   return { spriteObj, loadJsonAndTexture }
 }