feat: isolated model hooks

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

@@ -1,7 +1,5 @@
-import { useLoader } from '@react-three/fiber';
 import { useEffect, useRef } from 'react';
 import { Euler, Group, Mesh, Vector3 } from 'three';
-import { GLTFLoader } from 'three-stdlib';
 import { degToRad } from 'three/src/math/MathUtils';
 import { ArmorMesh } from '../../../../../../../../../components/ArmorMesh';
 import {
@@ -9,13 +7,13 @@ import {
   Y_AXIS,
   Z_AXIS,
 } from '../../../../../../../../../constants/axis';
-import { asset } from '../../../../../../../../../core/blitzkrieg/asset';
 import {
   ModelTransformEventData,
   modelTransformEvent,
 } from '../../../../../../../../../core/blitzkrieg/modelTransform';
 import { nameToArmorId } from '../../../../../../../../../core/blitzkrieg/nameToArmorId';
 import { resolveArmor } from '../../../../../../../../../core/blitzkrieg/resolveThickness';
+import { useArmor } from '../../../../../../../../../hooks/useArmor';
 import { useModelDefinitions } from '../../../../../../../../../hooks/useModelDefinitions';
 import { useTankopedia } from '../../../../../../../../../stores/tankopedia';
 import { Duel } from '../../../../../page';
@@ -107,10 +105,7 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
     return unsubscribe;
   });
 
-  const armorGltf = useLoader(
+  const armorGltf = useArmor(duel.protagonist.tank.id);
-    GLTFLoader,
-    asset(`3d/tanks/armor/${duel.protagonist.tank.id}.glb`),
-  );
 
   const armorNodes = Object.values(armorGltf.nodes);
   const tankModelDefinition = modelDefinitions[duel.protagonist.tank.id];

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

@@ -1,7 +1,5 @@
-import { useLoader } from '@react-three/fiber';
 import { memo, useEffect, useRef } from 'react';
 import { Euler, Group, Mesh, Vector3 } from 'three';
-import { GLTFLoader } from 'three-stdlib';
 import { degToRad } from 'three/src/math/MathUtils';
 import { ArmorMeshExternalModuleMask } from '../../../../../../../../../components/ArmorMesh';
 import {
@@ -9,13 +7,14 @@ import {
   Y_AXIS,
   Z_AXIS,
 } from '../../../../../../../../../constants/axis';
-import { asset } from '../../../../../../../../../core/blitzkrieg/asset';
 import {
   ModelTransformEventData,
   modelTransformEvent,
 } from '../../../../../../../../../core/blitzkrieg/modelTransform';
 import { nameToArmorId } from '../../../../../../../../../core/blitzkrieg/nameToArmorId';
 import { resolveArmor } from '../../../../../../../../../core/blitzkrieg/resolveThickness';
+import { useArmor } from '../../../../../../../../../hooks/useArmor';
+import { useModel } from '../../../../../../../../../hooks/useModel';
 import { useModelDefinitions } from '../../../../../../../../../hooks/useModelDefinitions';
 import { useTankopedia } from '../../../../../../../../../stores/tankopedia';
 import { Duel } from '../../../../../page';
@@ -114,14 +113,8 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
     return unsubscribe;
   });
 
-  const armorGltf = useLoader(
+  const armorGltf = useArmor(duel.protagonist.tank.id);
-    GLTFLoader,
+  const modelGltf = useModel(duel.protagonist.tank.id);
-    asset(`3d/tanks/armor/${duel.protagonist.tank.id}.glb`),
-  );
-  const modelGltf = useLoader(
-    GLTFLoader,
-    asset(`3d/tanks/models/${duel.protagonist.tank.id}.glb`),
-  );
 
   const armorNodes = Object.values(armorGltf.nodes);
   const modelNodes = Object.values(modelGltf.nodes);

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

@@ -1,7 +1,5 @@
-import { useLoader } from '@react-three/fiber';
 import { memo, useEffect, useRef } from 'react';
 import { Euler, Group, Mesh, Vector3 } from 'three';
-import { GLTFLoader } from 'three-stdlib';
 import { degToRad } from 'three/src/math/MathUtils';
 import { ArmorMeshSpacedArmorDepth } from '../../../../../../../../../components/ArmorMesh/components/SpacedArmorDepth';
 import {
@@ -9,13 +7,14 @@ import {
   Y_AXIS,
   Z_AXIS,
 } from '../../../../../../../../../constants/axis';
-import { asset } from '../../../../../../../../../core/blitzkrieg/asset';
 import {
   ModelTransformEventData,
   modelTransformEvent,
 } from '../../../../../../../../../core/blitzkrieg/modelTransform';
 import { nameToArmorId } from '../../../../../../../../../core/blitzkrieg/nameToArmorId';
 import { resolveArmor } from '../../../../../../../../../core/blitzkrieg/resolveThickness';
+import { useArmor } from '../../../../../../../../../hooks/useArmor';
+import { useModel } from '../../../../../../../../../hooks/useModel';
 import { useModelDefinitions } from '../../../../../../../../../hooks/useModelDefinitions';
 import { useTankopedia } from '../../../../../../../../../stores/tankopedia';
 import { Duel } from '../../../../../page';
@@ -120,14 +119,8 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
     return unsubscribe;
   });
 
-  const armorGltf = useLoader(
+  const armorGltf = useArmor(duel.protagonist.tank.id);
-    GLTFLoader,
+  const modelGltf = useModel(duel.protagonist.tank.id);
-    asset(`3d/tanks/armor/${duel.protagonist.tank.id}.glb`),
-  );
-  const modelGltf = useLoader(
-    GLTFLoader,
-    asset(`3d/tanks/models/${duel.protagonist.tank.id}.glb`),
-  );
 
   const armorNodes = Object.values(armorGltf.nodes);
   const modelNodes = Object.values(modelGltf.nodes);

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

@@ -1,4 +1,4 @@
-import { ThreeEvent, useLoader, useThree } from '@react-three/fiber';
+import { ThreeEvent, useThree } from '@react-three/fiber';
 import { memo, useEffect, useRef, useState } from 'react';
 import {
   Euler,
@@ -8,11 +8,9 @@ import {
   Vector2,
   Vector3,
 } from 'three';
-import { GLTFLoader } from 'three-stdlib';
 import { degToRad } from 'three/src/math/MathUtils';
 import { X_AXIS, Y_AXIS, Z_AXIS } from '../../../../../../../constants/axis';
 import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
-import { asset } from '../../../../../../../core/blitzkrieg/asset';
 import {
   ModelDefinitions,
   modelDefinitions,
@@ -23,6 +21,7 @@ import {
 } from '../../../../../../../core/blitzkrieg/modelTransform';
 import { resolveJsxTree } from '../../../../../../../core/blitzkrieg/resolveJsxTree';
 import { normalizeAnglePI } from '../../../../../../../core/math/normalizeAngle180';
+import { useModel } from '../../../../../../../hooks/useModel';
 import mutateTankopedia, {
   useTankopedia,
 } from '../../../../../../../stores/tankopedia';
@@ -122,10 +121,7 @@ export const TankModel = memo(({ duel: { protagonist } }: TankModelProps) => {
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
 
-  const gltf = useLoader(
+  const gltf = useModel(protagonist.tank.id);
-    GLTFLoader,
-    asset(`3d/tanks/models/${protagonist.tank.id}.glb`),
-  );
   const nodes = Object.values(gltf.nodes);
 
   return (

src/hooks/useArmor.ts

@@ -0,0 +1,7 @@
+import { useLoader } from '@react-three/fiber';
+import { GLTFLoader } from 'three-stdlib';
+import { asset } from '../core/blitzkrieg/asset';
+
+export function useArmor(id: number) {
+  return useLoader(GLTFLoader, asset(`3d/tanks/armor/${id}.glb`));
+}

src/hooks/useModel.ts

@@ -0,0 +1,7 @@
+import { useLoader } from '@react-three/fiber';
+import { GLTFLoader } from 'three-stdlib';
+import { asset } from '../core/blitzkrieg/asset';
+
+export function useModel(id: number) {
+  return useLoader(GLTFLoader, asset(`3d/tanks/models/${id}.glb`));
+}