diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx index 2f826be4..30db88e4 100644 --- a/src/components/Avatar/Avatar.component.tsx +++ b/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; + export interface AvatarProps extends LightingProps { /** * Path to `.glb` file of the 3D model. diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx index a1ccb1e7..4bf027c7 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/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 -}; diff --git a/src/components/Models/HalfBodyModel/HalfBodyModel.component.tsx b/src/components/Models/HalfBodyModel/HalfBodyModel.component.tsx index 2a5aba57..0ac5e6a4 100644 --- a/src/components/Models/HalfBodyModel/HalfBodyModel.component.tsx +++ b/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 = ({ scale = 1, rotation = 20 * (Math.PI / 180), idleRotation = false, - emotion = 'idle' + emotion }) => { const ref = useRef(); const { scene } = useLoader(GLTFLoader, modelUrl); diff --git a/src/components/Models/PoseModel/PoseModel.component.tsx b/src/components/Models/PoseModel/PoseModel.component.tsx index 54e77447..79b3a690 100644 --- a/src/components/Models/PoseModel/PoseModel.component.tsx +++ b/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 = ({ modelUrl, poseUrl, modelRef, scale = 1, emotion = 'happy' }) => { +export const PoseModel: FC = ({ modelUrl, poseUrl, modelRef, scale = 1, emotion }) => { const { scene } = useLoader(GLTFLoader, modelUrl); const { nodes } = useGraph(scene); const pose = useLoader(GLTFLoader, poseUrl); diff --git a/src/services/Models.service.ts b/src/services/Models.service.ts index 3f4c2a94..d046c9ac 100644 --- a/src/services/Models.service.ts +++ b/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) { diff --git a/src/types.ts b/src/types.ts index 26596da9..d1a09e79 100644 --- a/src/types.ts +++ b/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; - -export type Emotions = { - [name in Emotion]: Partial; -};