fix: correctly re-mounting camera

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

@@ -1,4 +1,3 @@
-import { PerspectiveCamera } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import { Suspense, use, useEffect, useRef } from 'react';
 import { Armor } from '../../../../../../components/Armor';
@@ -121,10 +120,7 @@ export function TankSandbox() {
 
   return (
     <Canvas
-      gl={{
+      gl={{ clippingPlanes: Object.freeze([]), localClippingEnabled: true }}
-        clippingPlanes: Object.freeze([]),
-        localClippingEnabled: true,
-      }}
       shadows
       ref={canvas}
       onPointerDown={handlePointerDown}
@@ -133,11 +129,9 @@ export function TankSandbox() {
           draft.shot = undefined;
         });
       }}
-      style={{
+      style={{ userSelect: 'none' }}
-        userSelect: 'none',
+      camera={{ fov: 25, far: 32 }}
-      }}
     >
-      <PerspectiveCamera makeDefault fov={25} far={32} />
       <Controls />
       <SceneProps />
 

src/components/Armor/components/SpacedArmorScene.tsx

@@ -33,6 +33,37 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
   const initialTankopediaState = tankopediaPersistentStore.getState();
   const protagonist = Duel.use((draft) => draft.protagonist);
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const track = Duel.use((state) => state.protagonist.track);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const armorGltf = useArmor(tank.id);
+  const { gltf: modelGltf } = useModel(tank.id);
+  const armorNodes = Object.values(armorGltf.nodes);
+  const modelNodes = Object.values(modelGltf.nodes);
+  const tankModelDefinition = modelDefinitions[tank.id];
+  const trackModelDefinition = tankModelDefinition.tracks[track.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+  const hullOrigin = new Vector3(
+    trackModelDefinition.origin[0],
+    trackModelDefinition.origin[1],
+    -trackModelDefinition.origin[2],
+  ).applyAxisAngle(I_HAT, Math.PI / 2);
+  const turretOrigin = new Vector3(
+    tankModelDefinition.turretOrigin[0],
+    tankModelDefinition.turretOrigin[1],
+    -tankModelDefinition.turretOrigin[2],
+  ).applyAxisAngle(I_HAT, Math.PI / 2);
+  const gunOrigin = new Vector3(
+    turretModelDefinition.gunOrigin[0],
+    turretModelDefinition.gunOrigin[1],
+    -turretModelDefinition.gunOrigin[2],
+  ).applyAxisAngle(I_HAT, Math.PI / 2);
+  const maskOrigin =
+    gunModelDefinition.mask === undefined
+      ? undefined
+      : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
 
   useEffect(() => {
     if (!modelDefinitions) return;
@@ -120,38 +151,6 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
     return unsubscribe;
   });
 
-  const tank = Duel.use((state) => state.protagonist.tank);
-  const track = Duel.use((state) => state.protagonist.track);
-  const turret = Duel.use((state) => state.protagonist.turret);
-  const gun = Duel.use((state) => state.protagonist.gun);
-  const armorGltf = useArmor(tank.id);
-  const { gltf: modelGltf } = useModel(tank.id);
-  const armorNodes = Object.values(armorGltf.nodes);
-  const modelNodes = Object.values(modelGltf.nodes);
-  const tankModelDefinition = modelDefinitions[tank.id];
-  const trackModelDefinition = tankModelDefinition.tracks[track.id];
-  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-  const gunModelDefinition = turretModelDefinition.guns[gun.id];
-  const hullOrigin = new Vector3(
-    trackModelDefinition.origin[0],
-    trackModelDefinition.origin[1],
-    -trackModelDefinition.origin[2],
-  ).applyAxisAngle(I_HAT, Math.PI / 2);
-  const turretOrigin = new Vector3(
-    tankModelDefinition.turretOrigin[0],
-    tankModelDefinition.turretOrigin[1],
-    -tankModelDefinition.turretOrigin[2],
-  ).applyAxisAngle(I_HAT, Math.PI / 2);
-  const gunOrigin = new Vector3(
-    turretModelDefinition.gunOrigin[0],
-    turretModelDefinition.gunOrigin[1],
-    -turretModelDefinition.gunOrigin[2],
-  ).applyAxisAngle(I_HAT, Math.PI / 2);
-  const maskOrigin =
-    gunModelDefinition.mask === undefined
-      ? undefined
-      : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
-
   return (
     <group
       ref={wrapper}

src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -1,4 +1,5 @@
 import { useThree } from '@react-three/fiber';
+import { useCallback } from 'react';
 import {
   Intersection,
   MeshBasicMaterial,
@@ -49,9 +50,6 @@ export type ArmorUserData = {
       variant: ExternalModuleVariant;
     }
 );
-type ArmorMeshIntersection = Intersection & {
-  object: Object3D & { userData: ArmorUserData };
-};
 
 const omitMaterial = new MeshBasicMaterial({
   colorWrite: false,
@@ -76,12 +74,13 @@ export function SpacedArmorSceneComponent({
   const camera = useThree((state) => state.camera);
   const duelStore = Duel.useStore();
 
-  async function shoot(
+  const shoot = useCallback(
+    async (
       point: Vector3,
       intersections: Intersection[],
       allowRicochet: boolean,
       remainingPenetrationInput?: number,
-  ) {
+    ) => {
       const { antagonist, protagonist } = duelStore.getState();
       const shell = antagonist.shell;
       const cameraNormal = camera.position.clone().sub(point).normalize();
@@ -189,6 +188,7 @@ export function SpacedArmorSceneComponent({
             isExplosive(shell.type) ? 90 : shell.ricochet!,
           );
           const angle = surfaceNormal.angleTo(cameraNormal);
+
           const threeCalibersRule =
             shell.caliber > thickness * 3 || index > 0 || !allowRicochet;
           const twoCalibersRule = shell.caliber > thickness * 2;
@@ -349,7 +349,9 @@ export function SpacedArmorSceneComponent({
       }
 
       return shot;
-  }
+    },
+    [camera],
+  );
 
   return (
     <>