proper grouping

packages/game/Models/MonoGltf.cs

@@ -11,6 +11,7 @@ using CUE4Parse.UE4.Assets.Exports.SkeletalMesh;
 using CUE4Parse.UE4.Assets.Exports.StaticMesh;
 using CUE4Parse.UE4.Objects.Core.Math;
 using CUE4Parse.UE4.Objects.Meshes;
+using Org.BouncyCastle.Crypto.Engines;
 using SharpGLTF.Geometry;
 using SharpGLTF.Geometry.VertexTypes;
 using SharpGLTF.Materials;
@@ -56,10 +57,13 @@ public class MonoGltf
 
         var lod0 = convertedStaticMesh.LODs.Find(lod => !lod.SkipLod)!;
 
+        var i = 0;
         foreach (var section in lod0.Sections!.Value)
         {
           var configured = ParseSection(section, materialMap, lod0, lod0.Verts!);
-          scene.AddRigidMesh(configured, group);
+          var node = group.CreateNode($"{i++}");
+
+          scene.AddRigidMesh(configured, node);
         }
       }
       else if (mesh is USkeletalMesh skeletalMesh)
@@ -68,10 +72,13 @@ public class MonoGltf
 
         var lod0 = convertedSkeletalMesh.LODs.Find(lod => !lod.SkipLod)!;
 
+        var i = 0;
         foreach (var section in lod0.Sections!.Value)
         {
           var configured = ParseSection(section, materialMap, lod0, lod0.Verts!);
-          scene.AddRigidMesh(configured, group);
+          var node = group.CreateNode($"{i++}");
+
+          scene.AddRigidMesh(configured, node);
         }
       }
       else

packages/website-ue/src/components/TankopediaSandbox/index.tsx

@@ -3,10 +3,11 @@ import {
   type StageParameters,
 } from "@protos/blitz_static_tank_upgrade_single_stage";
 import { OrbitControls } from "@react-three/drei";
-import { Canvas, useLoader } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
-import { Mesh, MeshStandardMaterial } from "three";
-import { GLTFLoader } from "three-stdlib";
 import { useProtagonist } from "../../hooks/useProtagonist";
+import { useTankChassisModel } from "../../hooks/useTankChassisModel";
+import { useTankHullModel } from "../../hooks/useTankHullModel";
+import { useTankModel } from "../../hooks/useTankModel";
 import styles from "./index.module.css";
 
 interface TankopediaSandboxProps {
@@ -40,50 +41,26 @@ function Content({ parameters }: TankopediaSandboxProps) {
     ({ tank_part }) => tank_part === VisualChanges_TankPart.TANK_PART_GUN,
   )!.name;
 
-  const hull = useLoader(GLTFLoader, `/models/tanks/${tank.id}/hull.glb`);
+  const collision = false;
-  const chassis = useLoader(GLTFLoader, `/models/tanks/${tank.id}/chassis.glb`);
 
-  console.log(chassis);
+  const hull = useTankHullModel();
-
+  const chassis = useTankChassisModel();
-  const turret = useLoader(
+  const turret = useTankModel(`/models/tanks/${tank.id}/${selectedTurret}.glb`);
-    GLTFLoader,
+  const gun = useTankModel(`/models/tanks/${tank.id}/${selectedGun}.glb`);
-    `/models/tanks/${tank.id}/${selectedTurret}.glb`,
-  );
-  const gun = useLoader(
-    GLTFLoader,
-    `/models/tanks/${tank.id}/${selectedGun}.glb`,
-  );
-
-  const gltfs = [turret, gun, hull, chassis];
-
-  for (const gltf of gltfs) {
-    gltf.scene.traverse((child) => {
-      if (
-        child instanceof Mesh &&
-        child.material instanceof MeshStandardMaterial
-      ) {
-        // TODO: remove this hack and fix the gltf
-        child.material.vertexColors = false;
-      }
-
-      child.castShadow = true;
-      child.receiveShadow = true;
-    });
-  }
 
   return (
     <>
       <group>
-        <primitive object={chassis.scene} />
+        <primitive object={chassis} />
-        <primitive object={hull.scene} />
+        <primitive object={hull} />
       </group>
 
       <group position={[0, 0, 5]}>
-        <primitive object={turret.scene} />
+        <primitive object={turret} />
       </group>
 
       <group position={[0, 0, -5]}>
-        <primitive object={gun.scene} />
+        <primitive object={gun} />
       </group>
 
       <spotLight
@@ -92,6 +69,12 @@ function Content({ parameters }: TankopediaSandboxProps) {
         intensity={2 ** 10}
         penumbra={1}
       />
+      <spotLight
+        castShadow
+        position={[-3, -10, -5]}
+        intensity={2 ** 10}
+        penumbra={1}
+      />
       <ambientLight />
 
       <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]}>

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

@@ -0,0 +1,25 @@
+import { Tankopedia } from "../stores/tankopedia";
+import { useProtagonist } from "./useProtagonist";
+import { useTankModel } from "./useTankModel";
+
+export function useTankChassisModel() {
+  const tank = useProtagonist();
+  const scene = useTankModel(`/models/tanks/${tank.id}/chassis.glb`);
+  const isChassisDamaged = Tankopedia.use(
+    (state) => state.protagonist.status.chassis_damaged,
+  );
+
+  // for (const child of scene.children) {
+  //   if (child.name.endsWith("TrackCrashed")) {
+  //     child.visible = isChassisDamaged;
+  //   }
+
+  //   if (child.name.startsWith("Track")) {
+  //     child.visible = !isChassisDamaged;
+  //   }
+  // }
+
+  console.log(scene);
+
+  return scene;
+}

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

@@ -0,0 +1,7 @@
+import { useProtagonist } from "./useProtagonist";
+import { useTankModel } from "./useTankModel";
+
+export function useTankHullModel() {
+  const tank = useProtagonist();
+  return useTankModel(`/models/tanks/${tank.id}/hull.glb`);
+}

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

@@ -0,0 +1,27 @@
+import { useLoader } from "@react-three/fiber";
+import { Mesh, MeshStandardMaterial } from "three";
+import { GLTFLoader } from "three-stdlib";
+
+export function useTankModel(url: string) {
+  const collision = false;
+  const gltf = useLoader(GLTFLoader, url);
+
+  gltf.scene.traverse((child) => {
+    if (
+      child instanceof Mesh &&
+      child.material instanceof MeshStandardMaterial
+    ) {
+      // TODO: remove this hack and fix the gltf
+      child.material.vertexColors = false;
+    }
+
+    child.castShadow = true;
+    child.receiveShadow = true;
+  });
+
+  for (const child of gltf.scene.children) {
+    child.visible = (child.name === "CollisionMesh") === collision;
+  }
+
+  return gltf.scene;
+}