feat: generalized prevent default

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

@@ -75,8 +75,6 @@ export const GunContainer = forwardRef<Group, GunContainerProps>(
             window.addEventListener('pointerup', handlePointerUp);
           }
           function handlePointerMove(event: PointerEvent) {
-            event.preventDefault();
-
             if (yawLimits) {
               draftYaw = clamp(
                 draftYaw + event.movementX * (Math.PI / canvas.width),

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

@@ -49,8 +49,6 @@ export const HullContainer = forwardRef<Group, HullContainerProps>(
             }
           }
           function handlePointerMoveHull(event: PointerEvent) {
-            event.preventDefault();
-
             draftHullYaw += event.movementX * ((2 * Math.PI) / canvas.width);
 
             if (hullContainer.current) {
@@ -63,13 +61,11 @@ export const HullContainer = forwardRef<Group, HullContainerProps>(
             window.removeEventListener('pointerup', handlePointerUpHull);
           }
           function handlePointerMoveTrack(event: PointerEvent) {
-            event.preventDefault();
-
             const mesh = object as Mesh;
             const material = mesh.material as MeshStandardMaterial;
             const offset = new Vector2(
               0,
-              -event.movementY * (6 / canvas.height) +
+              event.movementY * (6 / canvas.height) +
                 event.movementX * (6 / canvas.width),
             );
 

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

@@ -83,8 +83,6 @@ export const TurretContainer = forwardRef(
             }
           }
           function handlePointerMove(event: PointerEvent) {
-            event.preventDefault();
-
             if (yawLimits) {
               draftYaw = clamp(
                 draftYaw + event.movementX * (Math.PI / canvas.width),

src/app/tools/tankopedia/[id]/page.tsx

@@ -102,6 +102,18 @@ export default function Page({ params }: { params: { id: string } }) {
     gunPitchInput.current!.value = `${-Math.round(gunPitch * (180 / Math.PI))}`;
   }, [gunPitch]);
 
+  function handlePointerDown() {
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+  }
+  function handlePointerMove(event: PointerEvent) {
+    event.preventDefault();
+  }
+  function handlePointerUp() {
+    window.removeEventListener('pointermove', handlePointerMove);
+    window.removeEventListener('pointerup', handlePointerUp);
+  }
+
   return (
     <PageWrapper color="purple">
       <Flex gap="8" direction="column">
@@ -133,7 +145,12 @@ export default function Page({ params }: { params: { id: string } }) {
               </Tabs.Root>
 
               <div style={{ height: '50vh', maxHeight: 576 }}>
-                <Canvas shadows ref={canvas} camera={{ fov: 20 }}>
+                <Canvas
+                  shadows
+                  ref={canvas}
+                  camera={{ fov: 20 }}
+                  onPointerDown={handlePointerDown}
+                >
                   <Controls enabled={controlsEnabled} fit={hullContainer} />
                   <SceneProps />