feat: module hot swapping

src/app/tools/tankopedia/[id]/page.tsx

@@ -27,7 +27,7 @@ import { go } from 'fuzzysort';
 import { debounce } from 'lodash';
 import Link from 'next/link';
 import { use, useEffect, useRef, useState } from 'react';
-import { Group } from 'three';
+import { Group, Mesh } from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { Flag } from '../../../../components/Flag';
 import { ModuleButtons } from '../../../../components/ModuleButton';
@@ -130,8 +130,35 @@ export default function Page({ params }: { params: { id: string } }) {
                     />
                   </EffectComposer>
 
-                  <group ref={model}>
-                    <primitive object={gltf.scene} />
+                  <group ref={model} rotation={[-Math.PI / 2, 0, 0]}>
+                    {Object.entries(gltf.nodes).map(([name, node]) => (
+                      <mesh
+                        visible={
+                          name === 'hull' ||
+                          name.startsWith('chassis_track_') ||
+                          name.startsWith('chassis_wheel_') ||
+                          (name.startsWith('turret_') &&
+                            name ===
+                              `turret_${turret.model
+                                .toString()
+                                .padStart(2, '0')}`) ||
+                          (name.startsWith('gun_') &&
+                            name ===
+                              `gun_${gun.model.toString().padStart(2, '0')}`) ||
+                          name ===
+                            `gun_${gun.model.toString().padStart(2, '0')}_mask`
+                        }
+                        name={name}
+                        key={node.id}
+                        castShadow
+                        receiveShadow
+                        geometry={(node as Mesh).geometry}
+                        material={(node as Mesh).material}
+                        position={node.position}
+                        rotation={node.rotation}
+                        scale={node.scale}
+                      />
+                    ))}
                   </group>
                 </Canvas>
               </div>

src/core/blitz/extractModel.ts

@@ -323,13 +323,7 @@ export async function extractModel(
     });
   }
 
-  // rotate 90 degrees on the x axis
-  const rootNode = document
-    .createNode('root')
-    .setRotation([Math.cos(Math.PI / 4), 0, 0, -Math.sin(Math.PI / 4)]);
-
-  scene.addChild(rootNode);
-  parseHierarchies(sc2['#hierarchy'], rootNode);
+  parseHierarchies(sc2['#hierarchy'], scene);
 
   return document;
 }

src/core/blitzkrieg/tankDefinitions.ts

@@ -27,8 +27,9 @@ export interface TurretDefinition {
   name: string;
   tier: Tier;
   yaw?: [number, number];
-  gunOrigin: Vector3Tuple;
   guns: GunDefinition[];
+  gunOrigin: Vector3Tuple;
+  model: number;
 }
 export type GunDefinition = GunDefinitionBase &
   (GunDefinitionRegular | GunDefinitionAutoLoader | GunDefinitionAutoReloader);
@@ -38,6 +39,7 @@ interface GunDefinitionBase {
   tier: Tier;
   pitch: [number, number];
   shells: ShellDefinition[];
+  model: number;
 }
 interface GunDefinitionRegular {
   type: 'regular';