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

@@ -0,0 +1,30 @@
+import {
+  VisualChanges_TankPart,
+  type StageParameters,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+import { useProtagonist } from "../hooks/useProtagonist";
+import { TankModelPart } from "./TankModelPart";
+
+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,
+  );
+
+  const map = {
+    GunMesh: true,
+    MaskMesh: true,
+    CollisionMesh: false,
+  };
+
+  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

@@ -0,0 +1,44 @@
+import { useGLTF } from "@react-three/drei";
+import { useEffect } from "react";
+import { Mesh, MeshStandardMaterial } from "three";
+
+interface Props {
+  url: string;
+  map: Record<string, boolean>;
+}
+
+export function TankModelPart({ url, map }: Props) {
+  const gltf = useGLTF(url);
+  const [root] = gltf.scene.children;
+
+  useEffect(() => {
+    for (const material of Object.values(gltf.materials)) {
+      if (material instanceof MeshStandardMaterial) {
+        // TODO: remove this hack and fix the gltf
+        material.vertexColors = false;
+        material.needsUpdate = true;
+      }
+    }
+
+    for (const node of Object.values(gltf.nodes)) {
+      if (node instanceof Mesh) {
+        node.castShadow = true;
+        node.receiveShadow = true;
+      }
+    }
+  }, [url]);
+
+  useEffect(() => {
+    for (const child of root.children) {
+      if (child.name in map) {
+        child.visible = map[child.name];
+        continue;
+      }
+
+      child.visible = false;
+      console.warn(`Root child ${child.name} isn't recognized`);
+    }
+  }, [url, map]);
+
+  return <primitive object={root} />;
+}

packages/website-ue/src/components/TankModelTurret.tsx

@@ -0,0 +1,29 @@
+import {
+  VisualChanges_TankPart,
+  type StageParameters,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+import { useProtagonist } from "../hooks/useProtagonist";
+import { TankModelPart } from "./TankModelPart";
+
+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,
+  );
+
+  const map = {
+    Mesh: true,
+    CollisionMesh: false,
+  };
+
+  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 />