feat/add scale ratio for useSpriteLoader (#2002)

* feat: added optional Sprite or Plane geometry for SpriteAnimator

* feat/add scale-ratio calculation for each frame on useSpriteLoader

* chore/corrected formatting

* fix/texture-encoding and color-space constant

src/core/useSpriteLoader.tsx

@@ -175,9 +175,13 @@ export function useSpriteLoader<Url extends string>(
 
         aspect = calculateAspectRatio(frameWidth, frameHeight, aspectFactor, v)
       }
+
+      //scale ratio for stadalone sprite
+      spriteDataRef.current.frames = calculateScaleRatio(spriteDataRef.current.frames)
     } else if (_spriteTexture) {
       spriteDataRef.current = json
       spriteDataRef.current.frames = parseFrames()
+
       totalFrames.current = Array.isArray(json.frames) ? json.frames.length : Object.keys(json.frames).length
       const { w, h } = getFirstItem(json.frames).sourceSize
       aspect = calculateAspectRatio(w, h, aspectFactor, v)
@@ -187,7 +191,7 @@ export function useSpriteLoader<Url extends string>(
     // @ts-ignore
     if ('encoding' in _spriteTexture) _spriteTexture.encoding = 3001 // sRGBEncoding
     // @ts-ignore
-    else _spriteTexture.colorSpace = 'srgb'
+    else _spriteTexture.colorSpace = THREE.SRGBColorSpace
     setSpriteTexture(_spriteTexture)
     setSpriteObj({
       spriteTexture: _spriteTexture,
@@ -244,7 +248,7 @@ export function useSpriteLoader<Url extends string>(
 
   // for frame based JSON Hash sprite data
   const parseFrames = (): any => {
-    const sprites: any = {}
+    const sprites: Record<string, any> = {}
     const data = spriteDataRef.current
     const delimiters = animationNames
 
@@ -277,6 +281,11 @@ export function useSpriteLoader<Url extends string>(
           }
         }
       }
+
+      for (const frame in sprites) {
+        sprites[frame].frame = calculateScaleRatio(sprites[frame])
+      }
+
       return sprites
     } else if (delimiters && typeof data['frames'] === 'object') {
       for (let i = 0; i < delimiters.length; i++) {
@@ -305,18 +314,52 @@ export function useSpriteLoader<Url extends string>(
           }
         }
       }
+
+      for (const frame in sprites) {
+        sprites[frame].frame = calculateScaleRatio(sprites[frame])
+      }
+
       return sprites
     } else {
       // we need to convert it into an array
-      const spritesArr: any[] = []
+      let spritesArr: any[] = []
+
       for (const key in data.frames) {
         spritesArr.push(data.frames[key])
       }
 
+      spritesArr = calculateScaleRatio(spritesArr)
+
       return spritesArr
     }
   }
 
+  // calculate scale ratio for the frames
+  const calculateScaleRatio = (frames: any[]) => {
+    // Find the largest frame
+    let largestFrame: any = null
+    for (const frame of frames) {
+      const { w, h } = frame.frame
+      const area = w * h
+      if (!largestFrame || area > largestFrame.area) {
+        largestFrame = { ...frame.frame, area }
+      }
+    }
+
+    // Set scaleRatio property on each frame
+    for (const frame of frames) {
+      const { w, h } = frame.frame
+      const area = w * h
+      if (area === largestFrame?.area) {
+        frame.scaleRatio = 1
+      } else {
+        frame.scaleRatio = Math.sqrt(area / largestFrame?.area)
+      }
+    }
+
+    return frames
+  }
+
   React.useLayoutEffect(() => {
     onLoad?.(spriteTexture, spriteData)
   }, [spriteTexture, spriteData])