@sage-rsc/talking-head-react 1.1.9 → 1.2.1

package/package.json

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

@@ -5664,8 +5664,14 @@ class TalkingHead {
             newTrack.name = newTrackName;
             
             // Fix rotations for Ready Player Me arm bones (coordinate system correction)
+            // Ready Player Me uses a different coordinate system, so we need to adjust rotations
             const isArmBone = mappedBoneName.includes('Arm') || mappedBoneName.includes('Hand') || mappedBoneName.includes('Shoulder');
-            const isLeftArm = mappedBoneName.includes('Left');
+            const isLeftSide = mappedBoneName.includes('Left');
+            const isRightSide = mappedBoneName.includes('Right');
+            const isForearm = mappedBoneName.includes('ForeArm') || mappedBoneName.includes('Forearm');
+            const isHand = mappedBoneName.includes('Hand') && !mappedBoneName.includes('Index') && 
+                          !mappedBoneName.includes('Thumb') && !mappedBoneName.includes('Middle') &&
+                          !mappedBoneName.includes('Ring') && !mappedBoneName.includes('Pinky');
             
             if (isArmBone && (property === 'quaternion' || property === 'rotation')) {
               if (property === 'quaternion' && newTrack.values && newTrack.values.length >= 4) {
@@ -5679,23 +5685,32 @@ class TalkingHead {
                     let z = newTrack.values[baseIdx + 2];
                     let w = newTrack.values[baseIdx + 3];
                     
-                    // For Ready Player Me, we may need to flip certain axes
-                    // Try rotating 180 degrees around Y axis for left arm
-                    if (isLeftArm && mappedBoneName.includes('ForeArm')) {
-                      // Left forearm might need Y-axis flip
-                      const flipY = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
-                      const q = new THREE.Quaternion(x, y, z, w);
-                      q.multiply(flipY);
-                      x = q.x;
-                      y = q.y;
-                      z = q.z;
-                      w = q.w;
+                    let q = new THREE.Quaternion(x, y, z, w);
+                    
+                    // For Ready Player Me, left side bones may need coordinate system correction
+                    // Try multiple approaches: invert quaternion or rotate around different axes
+                    if (isLeftSide) {
+                      if (isHand) {
+                        // Left hand: Try inverting the quaternion (conjugate) to flip orientation
+                        // This might fix the "folding behind" issue
+                        q.conjugate();
+                        // Then rotate 180 degrees around Y axis
+                        const flipY = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
+                        q = flipY.multiply(q);
+                      } else if (isForearm) {
+                        // Left forearm: Try rotating 180 degrees around Y axis first
+                        const flipY = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
+                        q = flipY.multiply(q);
+                        // Then rotate 90 degrees around X axis
+                        const adjustX = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), Math.PI / 2);
+                        q = adjustX.multiply(q);
+                      }
                     }
                     
-                    newTrack.values[baseIdx] = x;
-                    newTrack.values[baseIdx + 1] = y;
-                    newTrack.values[baseIdx + 2] = z;
-                    newTrack.values[baseIdx + 3] = w;
+                    newTrack.values[baseIdx] = q.x;
+                    newTrack.values[baseIdx + 1] = q.y;
+                    newTrack.values[baseIdx + 2] = q.z;
+                    newTrack.values[baseIdx + 3] = q.w;
                   }
                 }
               }