@sage-rsc/talking-head-react 1.0.83 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.83",
+  "version": "1.1.0",
   "description": "A reusable React component for 3D talking avatars with lip-sync and text-to-speech",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/lib/talkinghead.mjs

@@ -432,11 +432,15 @@ class TalkingHead {
         anims: [
           { name: 'breathing', delay: 1500, dt: [ 1200,500,1000 ], vs: { chestInhale: [0.5,0.5,0] } },
           { name: 'pose', alt: [
-            { p: 0.5, delay: [5000,30000], vs: { pose: ['side'] } },
+            { p: 0.5, delay: [5000,30000], vs: { pose: ['side'] },
+              'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
+            },
             { p: 0.3, delay: [5000,30000], vs: { pose: ['hip'] },
               'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
             },
-            { delay: [5000,30000], vs: { pose: ['straight'] } }
+            { delay: [5000,30000], vs: { pose: ['straight'] },
+              'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
+            }
           ]},
           { name: 'head',
             idle: { delay: [0,1000], dt: [ [200,5000] ], vs: { bodyRotateX: [[-0.04,0.10]], bodyRotateY: [[-0.3,0.3]], bodyRotateZ: [[-0.08,0.08]] } },
@@ -456,9 +460,11 @@ class TalkingHead {
           { name: 'pose',
             idle: {
               alt: [
-                { p: 0.6, delay: [5000,30000], vs: { pose: ['side'] } },
+                { p: 0.6, delay: [5000,30000], vs: { pose: ['side'] },
+                  'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
+                },
                 { p: 0.2, delay: [5000,30000], vs: { pose: ['hip'] },
-                  'M': { delay: [5000,30000], vs: { pose: ['side'] } }
+                  'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
                 },
                 { p: 0.1, delay: [5000,30000], vs: { pose: ['straight'] } },
                 { delay: [5000,10000], vs: { pose: ['wide'] } },
@@ -467,8 +473,12 @@ class TalkingHead {
             },
             speaking: {
               alt: [
-                { p: 0.4, delay: [5000,30000], vs: { pose: ['side'] } },
-                { p: 0.4, delay: [5000,30000], vs: { pose: ['straight'] } },
+                { p: 0.4, delay: [5000,30000], vs: { pose: ['side'] },
+                  'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
+                },
+                { p: 0.4, delay: [5000,30000], vs: { pose: ['straight'] },
+                  'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
+                },
                 { delay: [5000,20000], vs: { pose: ['hip'] },
                   'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
                 },
@@ -2742,10 +2752,10 @@ class TalkingHead {
         } else if ( typeof x === 'function' ) {
           return x;
         } else if ( typeof x === 'string' || x instanceof String ) {
-          // Intercept pose values and override 'hip' for male avatars
-          if (mt === 'pose' && this.avatar && this.avatar.body === 'M' && x === 'hip') {
-            console.log('Intercepting hip pose in animation factory, overriding to wide');
-            return 'wide'; // Override hip to wide for male avatars
+          // Intercept pose values and override 'hip' and 'side' to 'wide' for male avatars
+          if (mt === 'pose' && this.avatar && this.avatar.body === 'M' && (x === 'hip' || x === 'side')) {
+            console.log('Intercepting pose', x, 'in animation factory, overriding to wide for male avatar');
+            return 'wide'; // Always use 'wide' for male avatars, never 'side' or 'hip'
           }
           return x.slice();
         } else if ( Array.isArray(x) ) {
@@ -3037,16 +3047,14 @@ class TalkingHead {
         break;
 
       case 'pose':
-        // Ensure gender-appropriate pose for male avatars
-        // If 'hip' pose is selected for male avatar, override to 'wide' or 'side'
-        if (this.avatar && this.avatar.body === 'M' && j === 'hip') {
-          // Prefer 'wide' for male avatars, fallback to 'side' if 'wide' doesn't exist
-          if (this.poseTemplates['wide']) {
-            j = 'wide';
-            console.log('Overriding hip pose to wide for male avatar');
-          } else if (this.poseTemplates['side']) {
-            j = 'side';
-            console.log('Overriding hip pose to side for male avatar');
+        // Ensure gender-appropriate pose for male avatars - always use 'wide', never 'side' or 'hip'
+        if (this.avatar && this.avatar.body === 'M') {
+          if (j === 'hip' || j === 'side') {
+            // Always override 'hip' and 'side' to 'wide' for male avatars
+            if (this.poseTemplates['wide']) {
+              j = 'wide';
+              console.log('Overriding pose', j === 'hip' ? 'hip' : 'side', 'to wide for male avatar');
+            }
           }
         }
         this.poseName = j;
@@ -5336,6 +5344,61 @@ class TalkingHead {
   * @param {number} [ndx=0] Index of the clip
   * @param {number} [scale=0.01] Position scale factor
   */
+  /**
+   * Get all bone names from the avatar's armature
+   * @returns {Set<string>} Set of bone names
+   */
+  getAvailableBoneNames() {
+    const boneNames = new Set();
+    if (!this.armature) return boneNames;
+    
+    this.armature.traverse((child) => {
+      if (child.isBone || child.type === 'Bone') {
+        boneNames.add(child.name);
+      }
+    });
+    
+    return boneNames;
+  }
+
+  /**
+   * Filter animation tracks to only include bones that exist in the avatar
+   * @param {THREE.AnimationClip} clip - Animation clip to filter
+   * @param {Set<string>} availableBones - Set of available bone names
+   * @returns {THREE.AnimationClip} Filtered animation clip
+   */
+  filterAnimationTracks(clip, availableBones) {
+    const validTracks = [];
+    const missingBones = new Set();
+    
+    clip.tracks.forEach(track => {
+      // Extract bone name from track name (e.g., "CC_Base_R_Index3.position" -> "CC_Base_R_Index3")
+      const trackNameParts = track.name.split('.');
+      const boneName = trackNameParts[0];
+      
+      if (availableBones.has(boneName)) {
+        validTracks.push(track);
+      } else {
+        missingBones.add(boneName);
+      }
+    });
+    
+    if (missingBones.size > 0) {
+      console.warn(`FBX animation "${clip.name}" contains tracks for ${missingBones.size} bone(s) not found in avatar skeleton:`, Array.from(missingBones).slice(0, 10).join(', '), missingBones.size > 10 ? '...' : '');
+      console.info(`Filtered ${clip.tracks.length} tracks down to ${validTracks.length} valid tracks`);
+    } else if (validTracks.length > 0) {
+      console.info(`FBX animation "${clip.name}" is fully compatible: all ${validTracks.length} tracks match avatar skeleton`);
+    }
+    
+    // Create a new clip with only valid tracks
+    if (validTracks.length === 0) {
+      console.error(`No valid tracks found for animation "${clip.name}". All bones are missing from avatar skeleton.`);
+      return null;
+    }
+    
+    return new THREE.AnimationClip(clip.name, clip.duration, validTracks);
+  }
+
   async playAnimation(url, onprogress=null, dur=10, ndx=0, scale=0.01, disablePositionLock=false) {
     if ( !this.armature ) return;
 
@@ -5483,6 +5546,20 @@ class TalkingHead {
       if ( fbx && fbx.animations && fbx.animations[ndx] ) {
         let anim = fbx.animations[ndx];
 
+        // Get available bone names from avatar skeleton
+        const availableBones = this.getAvailableBoneNames();
+        
+        // Filter animation tracks to only include bones that exist
+        const filteredAnim = this.filterAnimationTracks(anim, availableBones);
+        
+        if (!filteredAnim) {
+          console.error(`Cannot play FBX animation "${url}": No compatible bones found.`);
+          return;
+        }
+        
+        // Use the filtered animation instead of the original
+        anim = filteredAnim;
+
         // Rename and scale Mixamo tracks, create a pose
         const props = {};
         anim.tracks.forEach( t => {