diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/CameraPositioner.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/CameraPositioner.tsx
new file mode 100644
index 000000000..3243f1d7a
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/CameraPositioner.tsx
@@ -0,0 +1,14 @@
+import { useFrame } from '@react-three/fiber';
+
+export const zoom = 60;
+
+export function CameraPositioner() {
+ useFrame(({ camera, gl: { domElement } }) => {
+ const { width } = domElement.getBoundingClientRect();
+ const physicalWidth = width / zoom;
+
+ camera.position.set(10, 0, -physicalWidth / 6);
+ });
+
+ return null;
+}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/FlexibilityCanvas.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/FlexibilityCanvas.tsx
index e62bc8523..9a91b910c 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/FlexibilityCanvas.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/FlexibilityCanvas.tsx
@@ -1,8 +1,7 @@
import { Canvas } from '@react-three/fiber';
+import { CameraPositioner, zoom } from './CameraPositioner';
import { CanvasContent } from './CanvasContent';
-export const zoom = 60;
-
export function FlexibilityCanvas() {
return (
);
}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/ModelChunk.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/ModelChunk.tsx
index 840c9ff41..92aadfec5 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/ModelChunk.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/components/ModelChunk.tsx
@@ -59,7 +59,7 @@ export function ModelChunk({ onlyGun = false }: Props) {
<>
-
+
>
);
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx
index 6d0f6b621..58030407f 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx
@@ -13,8 +13,8 @@ export function ShellBorder(props: ComponentProps<'svg'>) {
);