Animations | PORTAL-716

src/App/components/Nova.tsx

@@ -16,15 +16,41 @@ export const AvatarNova: FC = () => {
 
   const animations = useMemo(
     () => ({
-      idle: getAnimation('nova-male-idle'),
-      victory: getAnimation('nova-victory-03'),
-      idle5: getAnimationNexus('compressed_idle_nova_5'),
-      idle53: getAnimationNexus('compressed_idle_nova_53'),
-      idle7: getAnimationNexus('compressed_idle_nova_7'),
-      idle80: getAnimationNexus('compressed_idle_nova_80'),
-      top: getAnimation('novamale_changetopwear_v001'),
-      bottom: getAnimation('novamale_changebottomwear_01_v001'),
-      foot: getAnimation('NovaMale_ChangeFootwear_v002')
+      idle: {
+        source: getAnimation('nova-male-idle')
+      },
+      victory: {
+        source: getAnimation('nova-victory-03'),
+        repeat: 1
+      },
+      idle5: {
+        source: getAnimationNexus('compressed_idle_nova_5'),
+        repeat: 1
+      },
+      idle53: {
+        source: getAnimationNexus('compressed_idle_nova_53'),
+        repeat: 1
+      },
+      idle7: {
+        source: getAnimationNexus('compressed_idle_nova_7'),
+        repeat: 1
+      },
+      idle80: {
+        source: getAnimationNexus('compressed_idle_nova_80'),
+        repeat: 1
+      },
+      top: {
+        source: getAnimation('novamale_changetopwear_v001'),
+        repeat: 1
+      },
+      bottom: {
+        source: getAnimation('novamale_changebottomwear_01_v001'),
+        repeat: 1
+      },
+      foot: {
+        source: getAnimation('NovaMale_ChangeFootwear_v002'),
+        repeat: 1
+      }
     }),
     []
   );
@@ -44,7 +70,10 @@ export const AvatarNova: FC = () => {
         animations={animations}
         activeAnimation={activeAnimation}
         shadows
-        onAnimationEnd={(action) => action}
+        onAnimationEnd={(action) => {
+          console.log('action', action);
+          setActiveAnimation('idle');
+        }}
         style={{ background: 'rgb(9,20,26)' }}
         fov={45}
         cameraInitialDistance={CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}

src/components/Avatar/Avatar.component.tsx

@@ -9,8 +9,8 @@ import {
   SpawnState,
   EffectConfiguration,
   LightingProps,
-  AnimationConfiguration,
-  MaterialConfiguration
+  MaterialConfiguration,
+  AnimationsT
 } from 'src/types';
 import { BaseCanvas } from 'src/components/BaseCanvas';
 import { AnimationModel, HalfBodyModel, StaticModel, PoseModel, MultipleAnimationModel } from 'src/components/Models';
@@ -153,18 +153,13 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
    * Use any three.js(fiber, post-processing) compatible components to render in the scene.
    */
   children?: ReactNode;
-  animations?: Record<string, string>;
+  animations?: AnimationsT;
   activeAnimation?: string;
-  /**
-   * Control properties of animations.
-   */
-  animationConfig?: AnimationConfiguration;
   /**
    * Control properties of materials.
    */
   materialConfig?: MaterialConfiguration;
   onAnimationEnd?: (action: AnimationAction) => void;
-  idleAnimation?: string;
 }
 
 /**
@@ -209,9 +204,7 @@ const Avatar: FC<AvatarProps> = ({
   backLightPosition,
   lightTarget,
   fov = 50,
-  animationConfig,
   onAnimationEnd,
-  idleAnimation,
   materialConfig
 }) => {
   const setSpawnState = useSetAtom(spawnState);
@@ -234,10 +227,8 @@ const Avatar: FC<AvatarProps> = ({
           activeAnimation={activeAnimation}
           scale={scale}
           onLoaded={onLoaded}
-          idleAnimation={idleAnimation}
           bloom={effects?.bloom}
           onAnimationEnd={onAnimationEnd}
-          animationConfig={animationConfig}
           materialConfig={materialConfig}
         />
       );
@@ -310,9 +301,7 @@ const Avatar: FC<AvatarProps> = ({
     emotion,
     effects?.bloom,
     materialConfig,
-    idleAnimation,
     onAnimationEnd,
-    animationConfig,
     idleRotation,
     headMovement
   ]);

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

@@ -3,20 +3,18 @@ import { useFrame } from '@react-three/fiber';
 import { AnimationAction, AnimationMixer, LoopOnce, LoopRepeat } from 'three';
 
 import { Model } from 'src/components/Models/Model';
-import { AnimationConfiguration, BaseModelProps } from 'src/types';
+import { AnimationsT, BaseModelProps } from 'src/types';
 import { useEmotion, useFallbackScene, useGltfCachedLoader, useIdleExpression } from 'src/services';
 import { Emotion } from 'src/components/Avatar/Avatar.component';
 import { useAnimations } from 'src/services/Animation.service';
 
 export interface MultipleAnimationModelProps extends BaseModelProps {
   modelSrc: string | Blob;
-  animations: Record<string, string>;
+  animations: AnimationsT;
   activeAnimation: string;
   scale?: number;
   emotion?: Emotion;
-  animationConfig?: AnimationConfiguration;
   onAnimationEnd?: (action: AnimationAction) => void;
-  idleAnimation?: string;
 }
 
 export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
@@ -28,10 +26,8 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
   onLoaded,
   emotion,
   bloom,
-  animationConfig,
   materialConfig,
-  onAnimationEnd,
-  idleAnimation = 'idle'
+  onAnimationEnd
 }) => {
   const mixerRef = useRef<AnimationMixer | null>(null);
   const activeActionRef = useRef<AnimationAction | null>(null);
@@ -65,37 +61,28 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
     const mixer = mixerRef.current;
     const prevAction = activeActionRef.current;
     const newClip = loadedAnimations[activeAnimation];
+    const animationConfig = animations[activeAnimation];
 
-    if (!newClip || !mixer) return;
-    if (prevAction && prevAction.getClip().name === newClip.name && activeAnimation !== idleAnimation) return;
+    if (!newClip || !mixer || !animationConfig) return;
+    if (prevAction && prevAction.getClip().name === newClip.name) return;
 
     const newAction = mixer.clipAction(newClip);
-    if (activeAnimation === idleAnimation) {
-      newAction.setLoop(LoopRepeat, Infinity);
-    } else {
-      newAction.setLoop(LoopOnce, 1);
-      newAction.clampWhenFinished = true;
-    }
+    const loopCount = animationConfig.repeat ?? Infinity;
+    const fadeTime = animationConfig.fadeTime ?? 0.5;
+
+    newAction.setLoop(loopCount === Infinity ? LoopRepeat : LoopOnce, loopCount);
 
     const handleAnimationEnd = (event: { action: AnimationAction }) => {
       if (event.action === newAction) {
         onAnimationEnd?.(newAction);
-        if (activeAnimation !== idleAnimation) {
-          const idleClip = loadedAnimations[idleAnimation];
-          if (idleClip) {
-            const idleAction = mixer.clipAction(idleClip);
-            idleAction.reset().setLoop(LoopRepeat, Infinity).fadeIn(0.5).play();
-            activeActionRef.current = idleAction;
-          }
-        }
       }
     };
 
     mixer.addEventListener('finished', handleAnimationEnd);
 
     if (prevAction) {
-      prevAction.fadeOut(0.5);
-      newAction.reset().fadeIn(0.5);
+      prevAction.fadeOut(fadeTime);
+      newAction.reset().fadeIn(fadeTime);
     } else {
       newAction.reset();
     }
@@ -107,7 +94,7 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
     return () => {
       mixer.removeEventListener('finished', handleAnimationEnd);
     };
-  }, [activeAnimation, loadedAnimations, animationConfig, onAnimationEnd, idleAnimation]);
+  }, [activeAnimation, animations, loadedAnimations, onAnimationEnd]);
 
   useFrame((state, delta) => {
     mixerRef.current?.update(delta);

src/services/Animation.service.ts

@@ -3,6 +3,7 @@ import { AnimationClip, Group } from 'three';
 import { FBXLoader, GLTFLoader } from 'three-stdlib';
 import { suspend } from 'suspend-react';
 import { MeshoptDecoder } from './meshopt_decoder';
+import { AnimationsT } from '../types';
 
 interface ClipWithType {
   group: Group;
@@ -72,13 +73,13 @@ export const loadAnimationClip = async (source: Blob | string): Promise<Animatio
   return animation.isFbx ? normaliseFbxAnimation(animation.group) : animation.group.animations[0];
 };
 
-export const useAnimations = (animations: Record<string, string>) =>
+export const useAnimations = (animations: AnimationsT) =>
   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]);
+        const newClip = await loadAnimationClip(animations[name].source);
         clips[name] = newClip;
       })
     );

src/types/index.ts

@@ -194,3 +194,12 @@ export type MaterialConfiguration = {
    */
   emissiveIntensity?: number;
 };
+
+export type AnimationsT = Record<
+  string,
+  {
+    source: string;
+    repeat?: number;
+    fadeTime?: number;
+  }
+>;