feat: armor display

src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx

@@ -19,6 +19,7 @@ import { Loader } from '../../../../components/Loader';
 import { Controls } from '../Control';
 import { RotationInputs } from '../RotationInputs';
 import { SceneProps } from '../SceneProps';
+import { TankArmor } from './components/TankArmor';
 import { TankModel } from './components/TankModel';
 
 export function TankDisplay() {
@@ -131,6 +132,7 @@ export function TankDisplay() {
                   }
                 >
                   <TankModel ref={hullContainer} />
+                  {mode === 'armor' && <TankArmor />}
                 </Suspense>
               </Canvas>
             </div>

src/app/tools/tankopedia/[id]/components/Model/components/TankArmor.tsx

@@ -0,0 +1,81 @@
+import { useLoader } from '@react-three/fiber';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { Group, Mesh, Vector3 } from 'three';
+import { GLTFLoader } from 'three-stdlib';
+import { X_AXIS } from '../../../../../../../constants/axis';
+import { asset } from '../../../../../../../core/blitzkrieg/asset';
+import {
+  ModelDefinitions,
+  modelDefinitions,
+} from '../../../../../../../core/blitzkrieg/modelDefinitions';
+import { useTankopedia } from '../../../../../../../stores/tankopedia';
+
+export const TankArmor = forwardRef<Group>((_props, ref) => {
+  const hullContainer = useRef<Group>(null);
+  const protagonist = useTankopedia((state) => {
+    if (!state.areTanksAssigned) return;
+    return state.protagonist;
+  });
+  const [awaitedModelDefinitions, setAwaitedModelDefinitions] = useState<
+    ModelDefinitions | undefined
+  >(undefined);
+
+  useEffect(() => {
+    (async () => {
+      setAwaitedModelDefinitions(await modelDefinitions);
+    })();
+  }, []);
+
+  useImperativeHandle(ref, () => hullContainer.current!);
+
+  if (!awaitedModelDefinitions) return null;
+  if (!protagonist) return null;
+
+  const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
+  const turretModelDefinition =
+    tankModelDefinition.turrets[protagonist.turret.id];
+  const turretOrigin = new Vector3(
+    tankModelDefinition.turretOrigin[0],
+    tankModelDefinition.turretOrigin[1],
+    -tankModelDefinition.turretOrigin[2],
+  ).applyAxisAngle(X_AXIS, Math.PI / 2);
+  const gunOrigin = new Vector3(
+    turretModelDefinition.gunOrigin[0],
+    turretModelDefinition.gunOrigin[1],
+    -turretModelDefinition.gunOrigin[2],
+  ).applyAxisAngle(X_AXIS, Math.PI / 2);
+  const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
+  const gltf = useLoader(
+    GLTFLoader,
+    asset(`3d/tanks/armor/${protagonist.tank.id}.glb`),
+  );
+
+  return (
+    <group ref={hullContainer} rotation={[-Math.PI / 2, 0, 0]}>
+      {Object.values(gltf.nodes).map((node) => {
+        const armor = Number(node.name.match(/.+_armor_(\d+)/)?.[1]);
+        const position = new Vector3();
+
+        if (node.name.startsWith('turret_')) position.add(turretOrigin);
+        if (node.name.startsWith('gun_'))
+          position.add(turretOrigin).add(gunOrigin);
+
+        return (
+          <mesh
+            key={node.uuid}
+            geometry={(node as Mesh).geometry}
+            position={position}
+          >
+            <meshBasicMaterial color="red" transparent opacity={0.5} />
+          </mesh>
+        );
+      })}
+    </group>
+  );
+});

src/app/tools/tankopedia/[id]/components/Model/components/TankModel/components/GunContainer.tsx

@@ -1,14 +1,14 @@
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { RefObject, forwardRef, useImperativeHandle, useRef } from 'react';
 import { Group, Mesh, Object3D, Vector3 } from 'three';
-import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
+import { applyPitchYawLimits } from '../../../../../../../../../core/blitz/applyPitchYawLimits';
 import {
   InitialTurretRotation,
   PitchLimits,
   YawLimits,
-} from '../../../../../core/blitzkrieg/modelDefinitions';
-import { resolveJsxTree } from '../../../../../core/blitzkrieg/resolveJsxTree';
-import { normalizeAnglePI } from '../../../../../core/math/normalizeAngle180';
+} from '../../../../../../../../../core/blitzkrieg/modelDefinitions';
+import { resolveJsxTree } from '../../../../../../../../../core/blitzkrieg/resolveJsxTree';
+import { normalizeAnglePI } from '../../../../../../../../../core/math/normalizeAngle180';
 
 interface GunContainerProps {
   turretOrigin: Vector3;

src/app/tools/tankopedia/[id]/components/Model/components/TankModel/components/HullContainer.tsx

@@ -1,8 +1,8 @@
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
 import { Group, Mesh, MeshStandardMaterial, Object3D, Vector2 } from 'three';
-import { resolveJsxTree } from '../../../../../core/blitzkrieg/resolveJsxTree';
-import { normalizeAnglePI } from '../../../../../core/math/normalizeAngle180';
+import { resolveJsxTree } from '../../../../../../../../../core/blitzkrieg/resolveJsxTree';
+import { normalizeAnglePI } from '../../../../../../../../../core/math/normalizeAngle180';
 
 interface HullContainerProps {
   children: ReactNode;

src/app/tools/tankopedia/[id]/components/Model/components/TankModel/components/TurretContainer.tsx

@@ -7,14 +7,14 @@ import {
   useRef,
 } from 'react';
 import { Euler, Group, Mesh, Object3D, Vector3 } from 'three';
-import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
+import { applyPitchYawLimits } from '../../../../../../../../../core/blitz/applyPitchYawLimits';
 import {
   InitialTurretRotation,
   PitchLimits,
   YawLimits,
-} from '../../../../../core/blitzkrieg/modelDefinitions';
-import { resolveJsxTree } from '../../../../../core/blitzkrieg/resolveJsxTree';
-import { normalizeAnglePI } from '../../../../../core/math/normalizeAngle180';
+} from '../../../../../../../../../core/blitzkrieg/modelDefinitions';
+import { resolveJsxTree } from '../../../../../../../../../core/blitzkrieg/resolveJsxTree';
+import { normalizeAnglePI } from '../../../../../../../../../core/math/normalizeAngle180';
 
 interface TurretContainerProps {
   turretOrigin: Vector3;

src/app/tools/tankopedia/[id]/components/Model/components/TankModel/index.tsx

@@ -8,18 +8,18 @@ import {
 } from 'react';
 import { Group, Vector3 } from 'three';
 import { GLTFLoader } from 'three-stdlib';
-import { X_AXIS } from '../../../../../../../constants/axis';
-import { asset } from '../../../../../../../core/blitzkrieg/asset';
+import { X_AXIS } from '../../../../../../../../constants/axis';
+import { asset } from '../../../../../../../../core/blitzkrieg/asset';
 import {
   ModelDefinitions,
   modelDefinitions,
-} from '../../../../../../../core/blitzkrieg/modelDefinitions';
+} from '../../../../../../../../core/blitzkrieg/modelDefinitions';
 import mutateTankopedia, {
   useTankopedia,
-} from '../../../../../../../stores/tankopedia';
-import { GunContainer } from '../../GunContainer';
-import { HullContainer } from '../../HullContainer';
-import { TurretContainer } from '../../TurretContainer';
+} from '../../../../../../../../stores/tankopedia';
+import { GunContainer } from './components/GunContainer';
+import { HullContainer } from './components/HullContainer';
+import { TurretContainer } from './components/TurretContainer';
 
 export const TankModel = forwardRef<Group>((_props, ref) => {
   // "TypeError: dispatcher.use is not a function"

src/core/blitzkrieg/modelDefinitions.ts

@@ -2,7 +2,14 @@ import { Vector3Tuple } from 'three';
 import { asset } from './asset';
 
 export type ModelDefinitions = Record<number, ModelDefinition>;
+
+export interface ModelArmor {
+  thickness: Record<number, number>;
+  spaced?: number[];
+}
+
 interface ModelDefinition {
+  armor: ModelArmor;
   turretOrigin: Vector3Tuple;
   turretRotation?: InitialTurretRotation;
   turrets: Record<number, TurretModelDefinition>;
@@ -13,6 +20,7 @@ export interface InitialTurretRotation {
   roll: number;
 }
 interface TurretModelDefinition {
+  armor: ModelArmor;
   model: number;
   gunOrigin: Vector3Tuple;
   guns: Record<number, GunModelDefinition>;
@@ -23,6 +31,7 @@ export interface YawLimits {
   max: number;
 }
 interface GunModelDefinition {
+  armor: ModelArmor;
   model: number;
   pitch: PitchLimits;
 }