feat: better alignment

package.json

@@ -62,6 +62,7 @@
     "satori": "^0.10.8",
     "sharp": "^0.33.1",
     "three": "^0.159.0",
+    "three-stdlib": "^2.28.11",
     "vite-node": "^0.34.5",
     "vitepress": "^1.0.0-rc.20",
     "vitepress-plugin-auto-sidebar": "^1.1.0",
@@ -81,7 +82,7 @@
     "@types/parse-dds": "^1.0.3",
     "@types/pngjs": "^6.0.4",
     "@types/react": "^18.2.22",
-    "@types/three": "^0.159.0",
+    "@types/three": "^0.160.0",
     "@vanilla-extract/next-plugin": "^2.3.1",
     "compare-versions": "^6.1.0",
     "crc": "^4.3.2",

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}

yarn.lock

@@ -2475,10 +2475,10 @@
   resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.3.tgz#705446e12ce0fad618557dd88236f51148b7a935"
   integrity sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==
 
-"@types/three@^0.159.0":
-  version "0.159.0"
-  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.159.0.tgz#e1c9d2a84543c2febee5244cc5cf7d657d13aa45"
-  integrity sha512-2gybdh7HtX+rGUgslzK7QEJfzD2I0qrbUGzKk+dK0FDx49UHkNX0rqZVRzIgeFjBd1HzzhNNgwNoMacm3Wyc7w==
+"@types/three@^0.160.0":
+  version "0.160.0"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.160.0.tgz#7915a97e0a14ccaa9ccbb9f190c5730b04a23075"
+  integrity sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==
   dependencies:
     "@types/stats.js" "*"
     "@types/webxr" "*"
@@ -5831,7 +5831,7 @@ three-mesh-bvh@^0.6.7:
   resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.6.8.tgz#f27d18ca75bdc59316dff0f561af8fb316621a54"
   integrity sha512-EGebF9DZx1S8+7OZYNNTT80GXJZVf+UYXD/HyTg/e2kR/ApofIFfUS4ZzIHNnUVIadpnLSzM4n96wX+l7GMbnQ==
 
-three-stdlib@^2.23.4:
+three-stdlib@^2.23.4, three-stdlib@^2.28.11:
   version "2.28.11"
   resolved "https://registry.yarnpkg.com/three-stdlib/-/three-stdlib-2.28.11.tgz#3cfb15563a228598d0d608630711640b7b7b499c"
   integrity sha512-2zo5+N2pe91Y88F+pTDTgQYNnV7pTixF93GQis2TS/fGeOf2Qlw0aKhJbzvSq7w8YkhpKL8f1v3L95JImxCltQ==