proper grouping

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 { Mesh, MeshStandardMaterial } from "three";
-import { GLTFLoader } from "three-stdlib";
+import { Canvas } from "@react-three/fiber";
 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 chassis = useLoader(GLTFLoader, `/models/tanks/${tank.id}/chassis.glb`);
+  const collision = false;
 
-  console.log(chassis);
-
-  const turret = useLoader(
-    GLTFLoader,
-    `/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;
-    });
-  }
+  const hull = useTankHullModel();
+  const chassis = useTankChassisModel();
+  const turret = useTankModel(`/models/tanks/${tank.id}/${selectedTurret}.glb`);
+  const gun = useTankModel(`/models/tanks/${tank.id}/${selectedGun}.glb`);
 
   return (
     <>
       <group>
-        <primitive object={chassis.scene} />
-        <primitive object={hull.scene} />
+        <primitive object={chassis} />
+        <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]}>