From 168865fe799427ea4dc7a29ab7ed6020073ff278 Mon Sep 17 00:00:00 2001
From: Brent Yi <yibrenth@gmail.com>
Date: Tue, 24 Sep 2024 00:27:38 -0700
Subject: [PATCH] Fix bone transforms for skinned meshes (#287)

---
 src/viser/client/src/ThreeAssets.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/viser/client/src/ThreeAssets.tsx b/src/viser/client/src/ThreeAssets.tsx
index bdb76703..5ce5717d 100644
--- a/src/viser/client/src/ThreeAssets.tsx
+++ b/src/viser/client/src/ThreeAssets.tsx
@@ -469,7 +469,6 @@ export const ViserMesh = React.forwardRef<
   const [skeleton, setSkeleton] = React.useState<THREE.Skeleton>();
   const bonesRef = React.useRef<THREE.Bone[]>();
 
-  const xyzw_quat = React.useMemo(() => new THREE.Quaternion(), []);
   React.useEffect(() => {
     const material =
       message.props.material == "standard" || message.props.wireframe
@@ -529,6 +528,7 @@ export const ViserMesh = React.forwardRef<
         bones.push(new THREE.Bone());
       }
       const boneInverses: THREE.Matrix4[] = [];
+      const xyzw_quat = new THREE.Quaternion();
       bones.forEach((bone, i) => {
         const wxyz = message.props.bone_wxyzs[i];
         const position = message.props.bone_positions[i];
@@ -542,8 +542,6 @@ export const ViserMesh = React.forwardRef<
 
         bone.quaternion.copy(xyzw_quat);
         bone.position.set(position[0], position[1], position[2]);
-        bone.matrixAutoUpdate = false;
-        bone.matrixWorldAutoUpdate = false;
       });
       skeleton = new THREE.Skeleton(bones, boneInverses);
 
@@ -614,10 +612,8 @@ export const ViserMesh = React.forwardRef<
           ? state.poses[i].position
           : message.props.bone_positions[i];
 
-        xyzw_quat.set(wxyz[1], wxyz[2], wxyz[3], wxyz[0]);
-        bone.matrix.makeRotationFromQuaternion(xyzw_quat);
-        bone.matrix.setPosition(position[0], position[1], position[2]);
-        bone.updateMatrixWorld();
+        bone.quaternion.set(wxyz[1], wxyz[2], wxyz[3], wxyz[0]);
+        bone.position.set(position[0], position[1], position[2]);
       });
 
       if (!state.initialized) {