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

package/package.json

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

@@ -5685,20 +5685,26 @@ class TalkingHead {
                     let z = newTrack.values[baseIdx + 2];
                     let w = newTrack.values[baseIdx + 3];
                     
-                    const q = new THREE.Quaternion(x, y, z, w);
+                    let q = new THREE.Quaternion(x, y, z, w);
                     
-                    // For Ready Player Me, hands may need coordinate system correction
-                    // Hands folding behind suggests we need to rotate around Y axis
-                    if (isHand) {
-                      // Rotate 180 degrees around Y axis to fix hands folding behind
-                      const flipY = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
-                      // Apply rotation: q_result = q_original * q_flip (post-multiply)
-                      q.multiply(flipY);
-                    } else if (isForearm) {
-                      // For forearms, try a smaller correction - rotate 90 degrees around Z axis
-                      // This might help with the twisting
-                      const adjustZ = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2);
-                      q.multiply(adjustZ);
+                    // 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] = q.x;