fix(animation): ACT-1005 improve avatar starting pose

src/App/components/Nova.tsx

@@ -14,9 +14,9 @@ const animations: Record<string, string> = {
 };
 
 const modelOneUrl =
-  'https://api.readyplayer.dev/v3/avatars/66e02a5804466d05776a8f80.glb?meshCompression=true&textureQuality=medium&meshLOD=0&morphTargetsGroup=Basic expressions';
+  'https://api.readyplayer.dev/v3/avatars/66fa76b8fdea89a183c01341.glb?meshCompression=true&textureQuality=low&meshLOD=1&morphTargetsGroup=Basic expressions';
 const modelTwoUrl =
-  'https://api.readyplayer.dev/v3/avatars/66e00aca4ec56c8f76e5da75.glb?meshCompression=true&textureQuality=medium&meshLOD=0&morphTargetsGroup=Basic expressions';
+  'https://api.readyplayer.dev/v3/avatars/66fa77cbfdea89a183c0134d.glb?meshCompression=true&textureQuality=low&meshLOD=1&morphTargetsGroup=Basic expressions';
 
 const models: Record<string, string> = {
   one: modelOneUrl,

src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx

@@ -1,12 +1,12 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 import { useFrame, useGraph } from '@react-three/fiber';
-import { AnimationAction, AnimationClip, AnimationMixer } from 'three';
+import { AnimationAction, AnimationMixer } from 'three';
 
 import { Model } from 'src/components/Models/Model';
 import { AnimationConfiguration, BaseModelProps } from 'src/types';
 import { useEmotion, useFallback, useGltfCachedLoader, useIdleExpression } from 'src/services';
 import { Emotion } from 'src/components/Avatar/Avatar.component';
-import { loadAnimationClip } from 'src/services/Animation.service';
+import { useAnimations } from 'src/services/Animation.service';
 
 export interface MultipleAnimationModelProps extends BaseModelProps {
   modelSrc: string | Blob;
@@ -33,28 +33,10 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
   const activeActionRef = useRef<AnimationAction | null>(null);
   const animationTimeRef = useRef<number>(0);
 
-  const [loadedAnimations, setLoadedAnimations] = useState<Record<string, AnimationClip>>({});
-
+  const loadedAnimations = useAnimations(animations);
   const { scene } = useGltfCachedLoader(modelSrc);
   const { nodes } = useGraph(scene);
 
-  useEffect(() => {
-    const loadAllAnimations = async () => {
-      const clips: Record<string, AnimationClip> = {};
-
-      await Promise.all(
-        Object.keys(animations).map(async (name) => {
-          const newClip = await loadAnimationClip(animations[name]);
-          clips[name] = newClip;
-        })
-      );
-
-      setLoadedAnimations(clips);
-    };
-
-    loadAllAnimations();
-  }, [animations]);
-
   useEffect(() => {
     if (scene) {
       const mixer = new AnimationMixer(scene);
@@ -93,6 +75,7 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
     }
 
     newAction.play();
+    mixer.update(0);
   }, [activeAnimation, loadedAnimations, animationConfig]);
 
   useFrame((state, delta) => {

src/services/Animation.service.ts

@@ -1,6 +1,7 @@
 import { AnimationClip, Group } from 'three';
 
 import { FBXLoader, GLTFLoader } from 'three-stdlib';
+import { suspend } from 'suspend-react';
 import { MeshoptDecoder } from './meshopt_decoder';
 
 interface ClipWithType {
@@ -64,8 +65,23 @@ const loadPathFile = async (source: string): Promise<ClipWithType> => {
     };
   }
 };
+
 export const loadAnimationClip = async (source: Blob | string): Promise<AnimationClip> => {
   const animation = source instanceof Blob ? await loadBlobFile(source) : await loadPathFile(source);
 
   return animation.isFbx ? normaliseFbxAnimation(animation.group) : animation.group.animations[0];
 };
+
+export const useAnimations = (animations: Record<string, string>) =>
+  suspend(async (): Promise<Record<string, AnimationClip>> => {
+    const clips: Record<string, AnimationClip> = {};
+
+    await Promise.all(
+      Object.keys(animations).map(async (name) => {
+        const newClip = await loadAnimationClip(animations[name]);
+        clips[name] = newClip;
+      })
+    );
+
+    return clips;
+  }, [animations]);