@sage-rsc/talking-head-react 1.0.84 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.84",
+  "version": "1.1.1",
   "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

@@ -2214,38 +2214,35 @@ class TalkingHead {
       console.log('Original position stored:', this.originalPosition);
     }
     
-    // Move avatar UP initially to compensate for FBX animation downward movement
-    // Set a higher base position so FBX animations land in the center
-    const upwardOffset = 2.0; // Even more upward movement
-    
+    // Lock the avatar at its CURRENT position (don't move it)
     this.lockedPosition = {
-      x: 0, // Keep centered horizontally
-      y: upwardOffset, // Set to the upward offset directly
-      z: 0  // Keep centered horizontally
+      x: this.armature.position.x,
+      y: this.armature.position.y,
+      z: this.armature.position.z
     };
     
-    // Set the avatar to the higher position
-    this.armature.position.set(
-      this.lockedPosition.x,
-      this.lockedPosition.y,
-      this.lockedPosition.z
-    );
-    
-    console.log('BEFORE: Avatar position was:', this.armature.position.x, this.armature.position.y, this.armature.position.z);
-    console.log('AFTER: Avatar position moved up and locked at:', this.lockedPosition);
-    console.log('Current view:', this.viewName);
+    console.log('Avatar position locked at current position:', this.lockedPosition);
   }
 
   /**
-   * Unlock avatar position and reset to center.
+   * Unlock avatar position and restore original position.
    */
   unlockAvatarPosition() {
-    if (this.armature) {
-      // Reset avatar to center (0,0,0) when animation finishes
+    if (this.armature && this.originalPosition) {
+      // Restore avatar to its original position before locking
+      this.armature.position.set(
+        this.originalPosition.x,
+        this.originalPosition.y,
+        this.originalPosition.z
+      );
+      console.log('Avatar position restored to original:', this.originalPosition);
+    } else if (this.armature) {
+      // Fallback: reset to center if no original position was stored
       this.armature.position.set(0, 0, 0);
       console.log('Avatar position reset to center (0,0,0)');
     }
     this.lockedPosition = null;
+    this.originalPosition = null; // Clear original position after unlock
     console.log('Avatar position unlocked');
   }
 
@@ -2254,31 +2251,13 @@ class TalkingHead {
    */
   maintainLockedPosition() {
     if (this.lockedPosition && this.armature) {
-      // Allow some downward movement but prevent excessive movement
-      // This lets FBX animations move the avatar down to the correct position
-      const currentY = this.armature.position.y;
-      const minY = this.lockedPosition.y - 2.0; // Allow up to 2.0 units down from locked position
-      const maxY = this.lockedPosition.y + 0.1; // Prevent moving up too much
-      
-      if (currentY < minY) {
-        // If moved too far down, bring it back up
-        this.armature.position.set(
-          this.lockedPosition.x,
-          minY,
-          this.lockedPosition.z
-        );
-      } else if (currentY > maxY) {
-        // If moved too far up, bring it back down
-        this.armature.position.set(
-          this.lockedPosition.x,
-          maxY,
-          this.lockedPosition.z
-        );
-      }
-      
-      // Always maintain X and Z position
-      this.armature.position.x = this.lockedPosition.x;
-      this.armature.position.z = this.lockedPosition.z;
+      // Enforce the locked position - keep avatar exactly where it was locked
+      // This prevents FBX animations from moving the avatar
+      this.armature.position.set(
+        this.lockedPosition.x,
+        this.lockedPosition.y,
+        this.lockedPosition.z
+      );
     }
   }
 
@@ -5344,6 +5323,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;
 
@@ -5491,6 +5525,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 => {