Merge pull request #9 from readyplayerme/feature/emotions-control

Feature/emotions control

src/components/Avatar/Avatar.component.tsx

@@ -4,7 +4,7 @@ import { PresetsType } from '@react-three/drei/helpers/environment-assets';
 import { Vector3 } from 'three';
 import { CameraLighting } from 'src/components/SceneControls/CameraLighting.component';
 import { AnimationModel } from 'src/components/Models/AnimationModel/AnimationModel.component';
-import { Emotion, LightingProps } from 'src/types';
+import { HeadBlendShapeType, LightingProps } from 'src/types';
 import { BaseCanvas } from 'src/components/BaseCanvas';
 import { HalfBodyModel, StaticModel, PoseModel } from 'src/components/Models';
 import { isValidGlbUrl } from 'src/services';
@@ -32,6 +32,8 @@ export const CAMERA = {
   }
 };
 
+export type Emotion = Record<HeadBlendShapeType, number>;
+
 export interface AvatarProps extends LightingProps {
   /**
    * Path to `.glb` file of the 3D model.

src/components/Avatar/Avatar.stories.tsx

@@ -23,8 +23,7 @@ Static.args = {
   spotLightColor: '#fff5b6',
   spotLightAngle: 0.314,
   cameraTarget: CAMERA.TARGET.FULL_BODY,
-  cameraInitialDistance: CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE,
-  emotion: 'idle'
+  cameraInitialDistance: CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE
 };
 
 export default {
@@ -69,13 +68,3 @@ Posing.args = {
   cameraTarget: CAMERA.TARGET.FULL_BODY,
   cameraInitialDistance: CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE
 };
-
-export const Emotions = Template.bind({});
-Emotions.args = {
-  ...Static.args,
-  modelUrl: getStoryAssetPath('male.glb'),
-  poseUrl: getStoryAssetPath('male-pose-standing.glb'),
-  emotion: 'angry',
-  cameraTarget: CAMERA.TARGET.FULL_BODY,
-  cameraInitialDistance: CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE
-};

src/components/Models/HalfBodyModel/HalfBodyModel.component.tsx

@@ -4,7 +4,7 @@ import { GLTFLoader } from 'three-stdlib';
 import { Model } from 'src/components/Models/Model';
 import { useEmotion, useHeadMovement } from 'src/services';
 import { Group } from 'three';
-import { Emotion } from '../../../types';
+import { Emotion } from '../../Avatar/Avatar.component';
 
 interface HalfBodyModelProps {
   modelUrl: string;
@@ -21,7 +21,7 @@ export const HalfBodyModel: FC<HalfBodyModelProps> = ({
   scale = 1,
   rotation = 20 * (Math.PI / 180),
   idleRotation = false,
-  emotion = 'idle'
+  emotion
 }) => {
   const ref = useRef<Group>();
   const { scene } = useLoader(GLTFLoader, modelUrl);

src/components/Models/PoseModel/PoseModel.component.tsx

@@ -4,7 +4,7 @@ import { GLTFLoader } from 'three-stdlib';
 import { Model } from 'src/components/Models/Model';
 import { Group } from 'three';
 import { mutatePose, useEmotion } from 'src/services';
-import { Emotion } from '../../../types';
+import { Emotion } from '../../Avatar/Avatar.component';
 
 interface PoseModelProps {
   modelUrl: string;
@@ -14,7 +14,7 @@ interface PoseModelProps {
   emotion?: Emotion;
 }
 
-export const PoseModel: FC<PoseModelProps> = ({ modelUrl, poseUrl, modelRef, scale = 1, emotion = 'happy' }) => {
+export const PoseModel: FC<PoseModelProps> = ({ modelUrl, poseUrl, modelRef, scale = 1, emotion }) => {
   const { scene } = useLoader(GLTFLoader, modelUrl);
   const { nodes } = useGraph(scene);
   const pose = useLoader(GLTFLoader, poseUrl);

src/services/Models.service.ts

@@ -1,8 +1,7 @@
 import { LinearFilter, MeshStandardMaterial, Material, Vector2, Object3D, SkinnedMesh } from 'three';
 import { useFrame } from '@react-three/fiber';
 import type { ObjectMap } from '@react-three/fiber';
-import { useMemo } from 'react';
-import { Emotions, Emotion } from '../types';
+import { Emotion } from '../components/Avatar/Avatar.component';
 
 export const getStoryAssetPath = (publicAsset: string) =>
   `${process.env.NODE_ENV === 'production' ? '/visage' : ''}/${publicAsset}`;
@@ -114,51 +113,8 @@ export const mutatePose = (targetNodes?: ObjectMap['nodes'], sourceNodes?: Objec
   }
 };
 
-const emotions: Emotions = {
-  idle: {},
-  impressed: {
-    mouthOpen: 0.7,
-    mouthSmile: 0.3,
-    mouthDimpleLeft: 0.4,
-    mouthDimpleRight: 0.4,
-    eyeWideLeft: 0.75,
-    eyeWideRight: 0.75,
-    browInnerUp: 0.3
-  },
-  sad: {
-    mouthSmile: -0.35,
-    browDownLeft: -0.45,
-    browDownRight: -0.45,
-    noseSneerLeft: -0.35,
-    noseSneerRight: -0.35
-  },
-  angry: {
-    browDownLeft: 0.95,
-    browDownRight: 0.95,
-    mouthDimpleLeft: -0.5,
-    mouthDimpleRight: -0.5,
-    mouthLowerDownRight: -0.3,
-    mouthLowerDownLeft: -0.3,
-    noseSneerLeft: 0.35,
-    noseSneerRight: 0.35,
-    eyeBlinkLeft: 0.15,
-    eyeBlinkRight: 0.15
-  },
-  happy: {
-    mouthSmile: 0.6,
-    mouthOpen: 0.3,
-    browDownRight: -0.5,
-    browDownLeft: -0.5,
-    mouthDimpleLeft: 0.7,
-    mouthDimpleRight: 0.7,
-    noseSneerLeft: 0.45,
-    noseSneerRight: 0.45
-  }
-};
-
-export const useEmotion = (nodes: ObjectMap['nodes'], emotion: Emotion) => {
+export const useEmotion = (nodes: ObjectMap['nodes'], emotion?: Emotion) => {
   const headMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar) as SkinnedMesh;
-  const selectedEmotion = useMemo(() => emotions[emotion], [emotion]);
 
   const resetEmotions = () =>
     headMesh?.morphTargetInfluences?.forEach((_, index) => {
@@ -170,10 +126,10 @@ export const useEmotion = (nodes: ObjectMap['nodes'], emotion: Emotion) => {
       return;
     }
 
-    if (emotion !== 'idle') {
+    if (emotion) {
       resetEmotions();
 
-      Object.entries(selectedEmotion).forEach(([shape, value]) => {
+      Object.entries(emotion).forEach(([shape, value]) => {
         const shapeId = headMesh!.morphTargetDictionary?.[shape];
 
         if (shapeId) {

src/types.ts

@@ -21,8 +21,6 @@ export interface LightingProps {
   spotLightAngle?: number;
 }
 
-export type Emotion = 'idle' | 'sad' | 'angry' | 'happy' | 'impressed';
-
 export type HeadBlendShapeType =
   | 'browDownLeft'
   | 'browDownRight'
@@ -87,9 +85,3 @@ export type HeadBlendShapeType =
   | 'viseme_kk'
   | 'viseme_nn'
   | 'viseme_sil';
-
-export type EmotionConfig = Record<HeadBlendShapeType, number>;
-
-export type Emotions = {
-  [name in Emotion]: Partial<EmotionConfig>;
-};