tank model part as components

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} />
+  );
+}

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}
+    />
+  );
 }

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} />;
+}

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} />;
 }

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}
+    />
+  );
 }

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 />

packages/website-ue/src/hooks/useTankChassisModel.ts

@@ -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);
-}

packages/website-ue/src/hooks/useTankHullModel.ts

@@ -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);
-}