fix: multipleanimation emotions added

src/App/components/Nova.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
 import { Avatar, CAMERA } from 'src/components/Avatar';
+import { emotions } from 'src/services/Stories.service';
 import { SettingsPanel } from './SettingsPanel';
 
 const idleUrl = 'https://readyplayerme-assets.s3.amazonaws.com/animations/nova-male-idle.glb';
 const victoryUrl = 'https://readyplayerme-assets.s3.amazonaws.com/animations/nova-victory-03.glb';
-const modelUrl = 'https://api.readyplayer.dev/v3/avatars/66e2cecfbd5d3e60f8cdbde5.glb';
+const modelUrl =
+  'https://api.readyplayer.dev/v3/avatars/66e2cecfbd5d3e60f8cdbde5.glb?meshCompression=true&textureQuality=medium&meshSimplify=0&morphTargetsGroup=Editor+combined';
 
 const animations: Record<string, string> = {
   idle: idleUrl,
@@ -27,6 +29,7 @@ export const AvatarNova: React.FC = () => {
       </SettingsPanel>
       <Avatar
         modelSrc={modelUrl}
+        emotion={emotions.smile}
         animations={animations}
         activeAnimation={activeAnimation}
         shadows

src/components/Avatar/Avatar.component.tsx

@@ -207,6 +207,7 @@ const Avatar: FC<AvatarProps> = ({
     if (!!activeAnimation && !halfBody && animations) {
       return (
         <MultipleAnimationModel
+          emotion={emotion}
           modelSrc={modelSrc}
           animations={animations}
           activeAnimation={activeAnimation}

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

@@ -1,16 +1,19 @@
 import React, { FC, useEffect, useRef, useState } from 'react';
-import { useFrame, useLoader } from '@react-three/fiber';
+import { useFrame, useGraph } from '@react-three/fiber';
 import { AnimationAction, AnimationClip, AnimationMixer, Group } from 'three';
 import { GLTFLoader } from 'three-stdlib';
 
 import { Model } from 'src/components/Models/Model';
 import { BaseModelProps } from 'src/types';
+import { useEmotion, useGltfLoader } from 'src/services';
+import { Emotion } from 'src/components/Avatar/Avatar.component';
 
 export interface MultipleAnimationModelProps extends BaseModelProps {
   modelSrc: string | Blob;
   animations: Record<string, string>;
   activeAnimation: string;
   scale?: number;
+  emotion?: Emotion;
 }
 
 export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
@@ -19,14 +22,16 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
   activeAnimation,
   scale = 1,
   onLoaded,
+  emotion,
   bloom
 }) => {
   const groupRef = useRef<Group>(null);
   const mixerRef = useRef<AnimationMixer | null>(null);
   const [loadedAnimations, setLoadedAnimations] = useState<Record<string, AnimationClip>>({});
   const [activeAction, setActiveAction] = useState<AnimationAction | null>(null);
 
-  const { scene } = useLoader(GLTFLoader, String(modelSrc));
+  const { scene } = useGltfLoader(modelSrc);
+  const { nodes } = useGraph(scene);
 
   useEffect(() => {
     if (scene && groupRef.current) {
@@ -75,5 +80,7 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
     mixerRef.current?.update(delta);
   });
 
+  useEmotion(nodes, emotion);
+
   return <Model modelRef={groupRef} scene={scene} scale={scale} onLoaded={onLoaded} bloom={bloom} />;
 };