fix: armor mesh rotation dysync

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -617,6 +617,7 @@ export function Characteristics() {
           return (
             <>
               <InfoWithDelta
+                key={`${member.type}-root`}
                 name={`${CREW_MEMBER_NAMES[member.type]}${count > 1 ? ` x ${count}` : ''}`}
                 unit="%"
                 decimals={0}
@@ -627,6 +628,7 @@ export function Characteristics() {
               </InfoWithDelta>
               {member.substitute && (
                 <Info
+                  key={`${member.type}-substitute`}
                   indent
                   name={
                     <>

src/app/tools/tankopedia/[id]/components/Control.tsx

@@ -55,7 +55,7 @@ export function Controls() {
 
   useEffect(() => {
     camera.position.set(-4, 4, -16);
-    orbitControls.current?.target.set(0, antagonistGunHeight / 2, 0);
+    orbitControls.current?.target.set(0, 1.25, 0);
 
     const unsubscribeTankopedia = useTankopediaPersistent.subscribe(
       (state) => state.model.visual.controlsEnabled,
@@ -135,7 +135,7 @@ export function Controls() {
 
         case Pose.Default: {
           camera.position.set(-4, 4, -16);
-          orbitControls.current?.target.set(0, antagonistGunHeight / 2, 0);
+          orbitControls.current?.target.set(0, 1.25, 0);
           break;
         }
       }

src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx

@@ -87,14 +87,14 @@ export function ArmorHighlighting() {
       },
     );
 
-    handleModelTransform(useDuel.getState().protagonist!);
+    handleModelTransform(protagonist);
     modelTransformEvent.on(handleModelTransform);
 
     return () => {
       modelTransformEvent.off(handleModelTransform);
       unsubscribe();
     };
-  }, []);
+  });
 
   const armorGltf = useArmor(protagonist.tank.id);
   const armorNodes = Object.values(armorGltf.nodes);

src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx

@@ -102,7 +102,7 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(
         turretContainer.current?.rotation.copy(turretRotation);
       }
 
-      handleModelTransform(useDuel.getState().protagonist!);
+      handleModelTransform(protagonist);
       modelTransformEvent.on(handleModelTransform);
 
       return () => {

src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx

@@ -108,7 +108,7 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(
         turretContainer.current?.rotation.copy(turretRotation);
       }
 
-      handleModelTransform(useDuel.getState().protagonist!);
+      handleModelTransform(protagonist);
       modelTransformEvent.on(handleModelTransform);
 
       return () => {

src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx

@@ -1,19 +1,17 @@
 import { ThreeEvent, useThree } from '@react-three/fiber';
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import { Euler, Group, Vector3 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils';
 import { I_HAT, J_HAT, K_HAT } from '../../../../../../../constants/axis';
 import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
 import { jsxTree } from '../../../../../../../core/blitzkrieg/jsxTree';
-import {
-  ModelDefinitions,
-  modelDefinitions,
-} from '../../../../../../../core/blitzkrieg/modelDefinitions';
+import { modelDefinitions } from '../../../../../../../core/blitzkrieg/modelDefinitions';
 import {
   ModelTransformEventData,
   modelTransformEvent,
 } from '../../../../../../../core/blitzkrieg/modelTransform';
 import { normalizeAnglePI } from '../../../../../../../core/math/normalizeAngle180';
+import { useAwait } from '../../../../../../../hooks/useAwait';
 import { useModel } from '../../../../../../../hooks/useModel';
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
 import mutateTankopediaPersistent, {
@@ -21,9 +19,7 @@ import mutateTankopediaPersistent, {
 } from '../../../../../../../stores/tankopedia';
 
 export const TankModel = memo(() => {
-  const [awaitedModelDefinitions, setAwaitedModelDefinitions] = useState<
-    ModelDefinitions | undefined
-  >(undefined);
+  const awaitedModelDefinitions = useAwait(modelDefinitions);
   const protagonist = useDuel((draft) => draft.protagonist!);
   const canvas = useThree((state) => state.gl.domElement);
   const hullContainer = useRef<Group>(null);
@@ -31,14 +27,6 @@ export const TankModel = memo(() => {
   const gunContainer = useRef<Group>(null);
 
   useEffect(() => {
-    (async () => {
-      setAwaitedModelDefinitions(await modelDefinitions);
-    })();
-  }, []);
-
-  useEffect(() => {
-    if (!awaitedModelDefinitions) return;
-
     const hullOrigin = new Vector3(
       trackModelDefinition.origin[0],
       trackModelDefinition.origin[1],
@@ -103,6 +91,7 @@ export const TankModel = memo(() => {
       turretContainer.current?.rotation.copy(turretRotation);
     }
 
+    handleModelTransform(protagonist);
     modelTransformEvent.on(handleModelTransform);
 
     return () => {

src/core/blitzkrieg/jsxTree.tsx

@@ -1,10 +1,11 @@
 import { MeshProps } from '@react-three/fiber';
 import { Mesh, Object3D } from 'three';
 
-export function jsxTree(node: Object3D, mesh?: MeshProps) {
+export function jsxTree(node: Object3D, mesh?: MeshProps, key?: string) {
   if (node instanceof Mesh) {
     return (
       <mesh
+        key={key}
         geometry={node.geometry}
         material={node.material}
         position={node.position}
@@ -16,11 +17,12 @@ export function jsxTree(node: Object3D, mesh?: MeshProps) {
   } else if (node instanceof Object3D) {
     return (
       <group
+        key={key}
         position={node.position}
         rotation={node.rotation}
         scale={node.scale}
       >
-        {node.children.map((child) => jsxTree(child, mesh))}
+        {node.children.map((child) => jsxTree(child, mesh, child.uuid))}
       </group>
     );
   }