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'>) { );