diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx index 0af7ceb5b..b5ad20735 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ArmorHighlighting.tsx +++ b/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( - GLTFLoader, - asset(`3d/tanks/armor/${duel.protagonist.tank.id}.glb`), - ); + const armorGltf = useArmor(duel.protagonist.tank.id); const armorNodes = Object.values(armorGltf.nodes); const tankModelDefinition = modelDefinitions[duel.protagonist.tank.id]; diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx index 1839a1aec..605434b43 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx +++ b/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(({ duel }) => { return unsubscribe; }); - const armorGltf = useLoader( - GLTFLoader, - asset(`3d/tanks/armor/${duel.protagonist.tank.id}.glb`), - ); - const modelGltf = useLoader( - GLTFLoader, - asset(`3d/tanks/models/${duel.protagonist.tank.id}.glb`), - ); + const armorGltf = useArmor(duel.protagonist.tank.id); + const modelGltf = useModel(duel.protagonist.tank.id); const armorNodes = Object.values(armorGltf.nodes); const modelNodes = Object.values(modelGltf.nodes); diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx index aad22f1a4..9c38430a8 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx +++ b/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(({ duel }) => { return unsubscribe; }); - const armorGltf = useLoader( - GLTFLoader, - asset(`3d/tanks/armor/${duel.protagonist.tank.id}.glb`), - ); - const modelGltf = useLoader( - GLTFLoader, - asset(`3d/tanks/models/${duel.protagonist.tank.id}.glb`), - ); + const armorGltf = useArmor(duel.protagonist.tank.id); + const modelGltf = useModel(duel.protagonist.tank.id); const armorNodes = Object.values(armorGltf.nodes); const modelNodes = Object.values(modelGltf.nodes); diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx index bb46ef586..2712657f7 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx +++ b/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( - GLTFLoader, - asset(`3d/tanks/models/${protagonist.tank.id}.glb`), - ); + const gltf = useModel(protagonist.tank.id); const nodes = Object.values(gltf.nodes); return ( diff --git a/src/hooks/useArmor.ts b/src/hooks/useArmor.ts new file mode 100644 index 000000000..ee4152582 --- /dev/null +++ b/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`)); +} diff --git a/src/hooks/useModel.ts b/src/hooks/useModel.ts new file mode 100644 index 000000000..11b856fef --- /dev/null +++ b/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`)); +}