From e6fa17a91162ee70c025d527e6ca973589acb7de Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 14 Jun 2026 14:37:52 -0500
Subject: [PATCH] tank model part as components

---
 .../src/components/TankModelChassis.tsx       | 19 ++++++++++++
 .../TankModelGun.tsx}                         | 17 ++++++++---
 .../src/components/TankModelHull.tsx          | 13 +++++++++
 .../TankModelPart.tsx}                        | 14 +++++----
 .../TankModelTurret.tsx}                      | 17 ++++++++---
 .../components/TankopediaSandbox/index.tsx    | 29 ++++++-------------
 .../src/hooks/useTankChassisModel.ts          | 17 -----------
 .../website-ue/src/hooks/useTankHullModel.ts  | 13 ---------
 8 files changed, 76 insertions(+), 63 deletions(-)
 create mode 100644 packages/website-ue/src/components/TankModelChassis.tsx
 rename packages/website-ue/src/{hooks/useTankGunModel.ts => components/TankModelGun.tsx} (52%)
 create mode 100644 packages/website-ue/src/components/TankModelHull.tsx
 rename packages/website-ue/src/{hooks/useTankModel.ts => components/TankModelPart.tsx} (78%)
 rename packages/website-ue/src/{hooks/useTankTurretModel.ts => components/TankModelTurret.tsx} (51%)
 delete mode 100644 packages/website-ue/src/hooks/useTankChassisModel.ts
 delete mode 100644 packages/website-ue/src/hooks/useTankHullModel.ts

diff --git a/packages/website-ue/src/components/TankModelChassis.tsx b/packages/website-ue/src/components/TankModelChassis.tsx
new file mode 100644
index 000000000..edab98cb8
--- /dev/null
+++ b/packages/website-ue/src/components/TankModelChassis.tsx
@@ -0,0 +1,19 @@
+import { useProtagonist } from "../hooks/useProtagonist";
+import { TankModelPart } from "./TankModelPart";
+
+export function TankModelChassis() {
+  const tank = useProtagonist();
+
+  const map = {
+    Wheels: true,
+    LeftTracks: true,
+    RightTracks: true,
+    LeftTrackCrashed: false,
+    RightTrackCrashed: false,
+    CollisionMesh: false,
+  };
+
+  return (
+    <TankModelPart url={`/models/tanks/${tank.id}/chassis.glb`} map={map} />
+  );
+}
diff --git a/packages/website-ue/src/hooks/useTankGunModel.ts b/packages/website-ue/src/components/TankModelGun.tsx
similarity index 52%
rename from packages/website-ue/src/hooks/useTankGunModel.ts
rename to packages/website-ue/src/components/TankModelGun.tsx
index 4d5a928e6..9318546ba 100644
--- a/packages/website-ue/src/hooks/useTankGunModel.ts
+++ b/packages/website-ue/src/components/TankModelGun.tsx
@@ -2,10 +2,14 @@ import {
   VisualChanges_TankPart,
   type StageParameters,
 } from "@protos/blitz_static_tank_upgrade_single_stage";
-import { useProtagonist } from "./useProtagonist";
-import { useTankModel } from "./useTankModel";
+import { useProtagonist } from "../hooks/useProtagonist";
+import { TankModelPart } from "./TankModelPart";
 
-export function useTankGunModel(parameters: StageParameters) {
+interface Props {
+  parameters: StageParameters;
+}
+
+export function TankModelGun({ parameters }: Props) {
   const tank = useProtagonist();
   const selected = parameters.visual_changes.find(
     ({ tank_part }) => tank_part === VisualChanges_TankPart.TANK_PART_GUN,
@@ -17,5 +21,10 @@ export function useTankGunModel(parameters: StageParameters) {
     CollisionMesh: false,
   };
 
-  return useTankModel(`/models/tanks/${tank.id}/${selected!.name}.glb`, map);
+  return (
+    <TankModelPart
+      url={`/models/tanks/${tank.id}/${selected!.name}.glb`}
+      map={map}
+    />
+  );
 }
diff --git a/packages/website-ue/src/components/TankModelHull.tsx b/packages/website-ue/src/components/TankModelHull.tsx
new file mode 100644
index 000000000..84027ebd1
--- /dev/null
+++ b/packages/website-ue/src/components/TankModelHull.tsx
@@ -0,0 +1,13 @@
+import { useProtagonist } from "../hooks/useProtagonist";
+import { TankModelPart } from "./TankModelPart";
+
+export function TankModelHull() {
+  const tank = useProtagonist();
+
+  const map = {
+    Mesh: true,
+    CollisionMesh: false,
+  };
+
+  return <TankModelPart url={`/models/tanks/${tank.id}/hull.glb`} map={map} />;
+}
diff --git a/packages/website-ue/src/hooks/useTankModel.ts b/packages/website-ue/src/components/TankModelPart.tsx
similarity index 78%
rename from packages/website-ue/src/hooks/useTankModel.ts
rename to packages/website-ue/src/components/TankModelPart.tsx
index 5c0fd4240..8feff02bb 100644
--- a/packages/website-ue/src/hooks/useTankModel.ts
+++ b/packages/website-ue/src/components/TankModelPart.tsx
@@ -1,10 +1,14 @@
-import { useLoader } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
 import { useEffect } from "react";
 import { Mesh, MeshStandardMaterial } from "three";
-import { GLTFLoader } from "three-stdlib";
 
-export function useTankModel(url: string, map: Record<string, boolean>) {
-  const gltf = useLoader(GLTFLoader, url);
+interface Props {
+  url: string;
+  map: Record<string, boolean>;
+}
+
+export function TankModelPart({ url, map }: Props) {
+  const gltf = useGLTF(url);
   const [root] = gltf.scene.children;
 
   useEffect(() => {
@@ -36,5 +40,5 @@ export function useTankModel(url: string, map: Record<string, boolean>) {
     }
   }, [url, map]);
 
-  return root;
+  return <primitive object={root} />;
 }
diff --git a/packages/website-ue/src/hooks/useTankTurretModel.ts b/packages/website-ue/src/components/TankModelTurret.tsx
similarity index 51%
rename from packages/website-ue/src/hooks/useTankTurretModel.ts
rename to packages/website-ue/src/components/TankModelTurret.tsx
index 5bf347b60..167ffbcdc 100644
--- a/packages/website-ue/src/hooks/useTankTurretModel.ts
+++ b/packages/website-ue/src/components/TankModelTurret.tsx
@@ -2,10 +2,14 @@ import {
   VisualChanges_TankPart,
   type StageParameters,
 } from "@protos/blitz_static_tank_upgrade_single_stage";
-import { useProtagonist } from "./useProtagonist";
-import { useTankModel } from "./useTankModel";
+import { useProtagonist } from "../hooks/useProtagonist";
+import { TankModelPart } from "./TankModelPart";
 
-export function useTankTurretModel(parameters: StageParameters) {
+interface Props {
+  parameters: StageParameters;
+}
+
+export function TankModelTurret({ parameters }: Props) {
   const tank = useProtagonist();
   const selected = parameters.visual_changes.find(
     ({ tank_part }) => tank_part === VisualChanges_TankPart.TANK_PART_TURRET,
@@ -16,5 +20,10 @@ export function useTankTurretModel(parameters: StageParameters) {
     CollisionMesh: false,
   };
 
-  return useTankModel(`/models/tanks/${tank.id}/${selected!.name}.glb`, map);
+  return (
+    <TankModelPart
+      url={`/models/tanks/${tank.id}/${selected!.name}.glb`}
+      map={map}
+    />
+  );
 }
diff --git a/packages/website-ue/src/components/TankopediaSandbox/index.tsx b/packages/website-ue/src/components/TankopediaSandbox/index.tsx
index c36cb50f7..695793afb 100644
--- a/packages/website-ue/src/components/TankopediaSandbox/index.tsx
+++ b/packages/website-ue/src/components/TankopediaSandbox/index.tsx
@@ -1,10 +1,10 @@
 import { type StageParameters } from "@protos/blitz_static_tank_upgrade_single_stage";
 import { Canvas } from "@react-three/fiber";
 import { fov } from "../../config/camera";
-import { useTankChassisModel } from "../../hooks/useTankChassisModel";
-import { useTankGunModel } from "../../hooks/useTankGunModel";
-import { useTankHullModel } from "../../hooks/useTankHullModel";
-import { useTankTurretModel } from "../../hooks/useTankTurretModel";
+import { TankModelChassis } from "../TankModelChassis";
+import { TankModelGun } from "../TankModelGun";
+import { TankModelHull } from "../TankModelHull";
+import { TankModelTurret } from "../TankModelTurret";
 import { TankopediaControls } from "../TankopediaControls";
 import { TankopediaLighting } from "../TankopediaLighting";
 import { SceneProps } from "../TankopediaSceneProps";
@@ -32,25 +32,14 @@ export function TankopediaSandbox({ parameters }: TankopediaSandboxProps) {
 }
 
 function Content({ parameters }: TankopediaSandboxProps) {
-  const hull = useTankHullModel();
-  const chassis = useTankChassisModel();
-  const turret = useTankTurretModel(parameters);
-  const gun = useTankGunModel(parameters);
-
   return (
     <>
-      <group>
-        <primitive object={chassis} />
-        <primitive object={hull} />
-      </group>
+      <TankModelChassis />
+      <TankModelHull />
+      <TankModelTurret parameters={parameters} />
+      <TankModelGun parameters={parameters} />
 
-      <group>
-        <primitive object={turret} />
-      </group>
-
-      <group>
-        <primitive object={gun} />
-      </group>
+      {/**/}
 
       <TankopediaLighting />
       <SceneProps />
diff --git a/packages/website-ue/src/hooks/useTankChassisModel.ts b/packages/website-ue/src/hooks/useTankChassisModel.ts
deleted file mode 100644
index d11a1c683..000000000
--- a/packages/website-ue/src/hooks/useTankChassisModel.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useProtagonist } from "./useProtagonist";
-import { useTankModel } from "./useTankModel";
-
-export function useTankChassisModel() {
-  const tank = useProtagonist();
-
-  const map = {
-    Wheels: true,
-    LeftTracks: true,
-    RightTracks: true,
-    LeftTrackCrashed: false,
-    RightTrackCrashed: false,
-    CollisionMesh: false,
-  };
-
-  return useTankModel(`/models/tanks/${tank.id}/chassis.glb`, map);
-}
diff --git a/packages/website-ue/src/hooks/useTankHullModel.ts b/packages/website-ue/src/hooks/useTankHullModel.ts
deleted file mode 100644
index 63fb4dbd5..000000000
--- a/packages/website-ue/src/hooks/useTankHullModel.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useProtagonist } from "./useProtagonist";
-import { useTankModel } from "./useTankModel";
-
-export function useTankHullModel() {
-  const tank = useProtagonist();
-
-  const map = {
-    Mesh: true,
-    CollisionMesh: false,
-  };
-
-  return useTankModel(`/models/tanks/${tank.id}/hull.glb`, map);
-}