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 394f9b1f3..e92eabb3d 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx
@@ -1,6 +1,7 @@
import { ThreeEvent, useThree } from '@react-three/fiber';
import { memo, useRef } from 'react';
import { Group, Mesh, MeshStandardMaterial, Vector2 } from 'three';
+import { ModelTankWrapper } from '../../../../../../../components/Armor/components/ModelTankWrapper';
import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment';
import { jsxTree } from '../../../../../../../core/blitzkit/jsxTree';
@@ -36,7 +37,7 @@ export const TankModel = memo(() => {
const nodes = Object.values(gltf.nodes);
return (
-
+
{nodes.map((node) => {
const isHull = node.name === 'hull';
const isWheel = node.name.startsWith('chassis_wheel_');
@@ -260,6 +261,6 @@ export const TankModel = memo(() => {
})}
-
+
);
});
diff --git a/src/components/Armor/components/CoreArmorScene.tsx b/src/components/Armor/components/CoreArmorScene.tsx
index 630b2a4d7..d87f98cb9 100644
--- a/src/components/Armor/components/CoreArmorScene.tsx
+++ b/src/components/Armor/components/CoreArmorScene.tsx
@@ -9,6 +9,7 @@ import { useTankTransform } from '../../../hooks/useTankTransform';
import * as Duel from '../../../stores/duel';
import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
import { CoreArmorSceneComponent } from './CoreArmorSceneComponent';
+import { ModelTankWrapper } from './ModelTankWrapper';
export const CoreArmorScene = memo(() => {
const wrapper = useRef(null);
@@ -47,9 +48,8 @@ export const CoreArmorScene = memo(() => {
const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
return (
-
@@ -75,58 +75,55 @@ export const CoreArmorScene = memo(() => {
-
+ {armorNodes.map((node) => {
+ const isCurrentTurret = node.name.startsWith(
+ `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+ );
+ const isVisible = isCurrentTurret;
+ const armorId = nameToArmorId(node.name);
+ const { spaced, thickness } = resolveArmor(
+ turretModelDefinition.armor,
+ armorId,
+ );
+
+ if (!isVisible || spaced || thickness === undefined) return null;
+
+ return (
+
+
+
+ );
+ })}
+
+
{armorNodes.map((node) => {
- const isCurrentTurret = node.name.startsWith(
- `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+ const isCurrentGun = node.name.startsWith(
+ `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
);
- const isVisible = isCurrentTurret;
+ const isVisible = isCurrentGun;
const armorId = nameToArmorId(node.name);
const { spaced, thickness } = resolveArmor(
- turretModelDefinition.armor,
+ gunModelDefinition.armor,
armorId,
);
if (!isVisible || spaced || thickness === undefined) return null;
return (
-
-
+
+
);
})}
-
-
- {armorNodes.map((node) => {
- const isCurrentGun = node.name.startsWith(
- `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
- );
- const isVisible = isCurrentGun;
- const armorId = nameToArmorId(node.name);
- const { spaced, thickness } = resolveArmor(
- gunModelDefinition.armor,
- armorId,
- );
-
- if (!isVisible || spaced || thickness === undefined) return null;
-
- return (
-
-
-
- );
- })}
-
-
-
+
);
});
diff --git a/src/components/Armor/components/ModelTankWrapper.tsx b/src/components/Armor/components/ModelTankWrapper.tsx
new file mode 100644
index 000000000..def5d5c66
--- /dev/null
+++ b/src/components/Armor/components/ModelTankWrapper.tsx
@@ -0,0 +1,7 @@
+import { GroupProps } from '@react-three/fiber';
+import { forwardRef } from 'react';
+import { Group } from 'three';
+
+export const ModelTankWrapper = forwardRef((props, ref) => {
+ return ;
+});
diff --git a/src/components/Armor/components/SpacedArmorScene.tsx b/src/components/Armor/components/SpacedArmorScene.tsx
index ebe650121..5f786534d 100644
--- a/src/components/Armor/components/SpacedArmorScene.tsx
+++ b/src/components/Armor/components/SpacedArmorScene.tsx
@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from 'react';
+import { memo, useRef } from 'react';
import { Group, Plane, Scene, Vector3 } from 'three';
import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
@@ -8,7 +8,7 @@ import { useModel } from '../../../hooks/useModel';
import { useModelDefinitions } from '../../../hooks/useModelDefinitions';
import { useTankTransform } from '../../../hooks/useTankTransform';
import * as Duel from '../../../stores/duel';
-import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
+import { ModelTankWrapper } from './ModelTankWrapper';
import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent';
export enum ArmorType {
@@ -26,8 +26,6 @@ export const SpacedArmorScene = memo(({ scene }) => {
const modelDefinitions = useModelDefinitions();
const turretContainer = useRef(null);
const gunContainer = useRef(null);
- const tankopediaPersistentStore = TankopediaPersistent.useStore();
- const initialTankopediaState = tankopediaPersistentStore.getState();
const protagonist = Duel.use((draft) => draft.protagonist);
const tank = Duel.use((state) => state.protagonist.tank);
const track = Duel.use((state) => state.protagonist.track);
@@ -51,23 +49,8 @@ export const SpacedArmorScene = memo(({ scene }) => {
useTankTransform(protagonist, turretContainer, gunContainer);
- useEffect(() => {
- const unsubscribe = tankopediaPersistentStore.subscribe(
- (state) => state.mode,
- (mode) => {
- if (wrapper.current) wrapper.current.visible = mode === 'armor';
- },
- );
-
- return unsubscribe;
- });
-
return (
-
+
{armorNodes.map((node) => {
const isHull = node.name.startsWith('hull_');
@@ -91,6 +74,7 @@ export const SpacedArmorScene = memo(({ scene }) => {
);
})}
+
{modelNodes.map((node) => {
const isWheel = node.name.startsWith('chassis_wheel_');
const isTrack = node.name.startsWith('chassis_track_');
@@ -111,25 +95,53 @@ export const SpacedArmorScene = memo(({ scene }) => {
})}
-
+ {armorNodes.map((node) => {
+ const isCurrentTurret = node.name.startsWith(
+ `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+ );
+ const isVisible = isCurrentTurret;
+ const armorId = nameToArmorId(node.name);
+ const { spaced, thickness } = resolveArmor(
+ turretModelDefinition.armor,
+ armorId,
+ );
+
+ if (!isVisible || thickness === undefined) return null;
+
+ return (
+
+
+
+ );
+ })}
+
+
{armorNodes.map((node) => {
- const isCurrentTurret = node.name.startsWith(
- `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+ const isCurrentGun = node.name.startsWith(
+ `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
);
- const isVisible = isCurrentTurret;
+ const isVisible = isCurrentGun;
const armorId = nameToArmorId(node.name);
const { spaced, thickness } = resolveArmor(
- turretModelDefinition.armor,
+ gunModelDefinition.armor,
armorId,
);
if (!isVisible || thickness === undefined) return null;
return (
-
+
(({ scene }) => {
);
})}
-
-
-
- {armorNodes.map((node) => {
- const isCurrentGun = node.name.startsWith(
- `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
- );
- const isVisible = isCurrentGun;
- const armorId = nameToArmorId(node.name);
- const { spaced, thickness } = resolveArmor(
- gunModelDefinition.armor,
- armorId,
- );
-
- if (!isVisible || thickness === undefined) return null;
-
- return (
-
-
-
- );
- })}
-
{modelNodes.map((node) => {
const gunString = `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`;
@@ -196,6 +177,6 @@ export const SpacedArmorScene = memo(({ scene }) => {
})}
-
+
);
});