feat: better alignment

src/app/tools/tankopedia/[id]/components/tankAlignment.ts

@@ -1,21 +0,0 @@
-import { useThree } from '@react-three/fiber';
-import { RefObject, useEffect } from 'react';
-import { Box3, Group } from 'three';
-
-interface TankAlignmentProps {
-  model: RefObject<Group>;
-}
-
-export function TankAlignment({ model }: TankAlignmentProps) {
-  const camera = useThree((state) => state.camera);
-
-  useEffect(() => {
-    const box = new Box3().setFromObject(model.current!);
-    const diameter = Math.max(box.max.x - box.min.x, box.max.z - box.min.z);
-    const radius = diameter / 2;
-
-    camera.position.set(0, (box.min.y + box.max.y) / 2, -10);
-  }, []);
-
-  return null;
-}

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

@@ -0,0 +1,31 @@
+import { OrbitControls } from '@react-three/drei';
+import { useThree } from '@react-three/fiber';
+import { RefObject, useEffect, useRef } from 'react';
+import { Box3, Group, Vector3 } from 'three';
+import { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
+
+interface TankAlignmentProps {
+  model: RefObject<Group>;
+  orbit: boolean;
+}
+
+export function TankAlignment({ model, orbit }: TankAlignmentProps) {
+  const controls = useRef<OrbitControlsImpl>(null);
+  const camera = useThree((state) => state.camera);
+
+  useEffect(() => {
+    const box = new Box3().setFromObject(model.current!);
+    const diameter = Math.max(box.max.x - box.min.x, box.max.z - box.min.z);
+
+    controls.current?.target.set(0, (2 * box.min.y + box.max.y) / 3, 0);
+    camera.position.set(-5, (box.min.y + box.max.y) / 2, -15);
+  }, []);
+
+  return (
+    <OrbitControls
+      ref={controls}
+      enabled={orbit}
+      target={new Vector3(0, 2, 0)}
+    />
+  );
+}

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

@@ -5,7 +5,6 @@ import {
   CaretRightIcon,
   MagnifyingGlassIcon,
 } from '@radix-ui/react-icons';
-
 import {
   Button,
   Card,
@@ -20,7 +19,6 @@ import {
   Theme,
   Tooltip,
 } from '@radix-ui/themes';
-import { OrbitControls } from '@react-three/drei';
 import { Canvas, ThreeEvent, useLoader } from '@react-three/fiber';
 import { go } from 'fuzzysort';
 import { debounce } from 'lodash';
@@ -140,19 +138,19 @@ export default function Page({ params }: { params: { id: string } }) {
                   onPointerDown={(event) => event.preventDefault()}
                   camera={{ fov: 20 }}
                 >
-                  <TankAlignment model={hullContainer} />
-                  <OrbitControls enabled={orbitControlsEnabled} />
+                  <TankAlignment
+                    model={hullContainer}
+                    orbit={orbitControlsEnabled}
+                  />
+
                   <InfiniteGridHelper
-                    position={[0, 0, 0]}
-                    axes="xzy"
                     size1={1 / 5}
                     size2={1}
                     distance={20}
                     color={new Color('#ffffff')}
                   />
                   <InfiniteGridHelper
-                    position={[0, 0, 0]}
-                    axes="xzy"
+                    position={[0, 1e-4, 0]}
                     size1={0}
                     size2={100}
                     distance={25}