From 4248e19f68c146072cccf7113ce1a99ab27ab95f Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 14 Jun 2026 12:49:34 -0500
Subject: [PATCH] abstract away camera initials

---
 .../src/components/TankopediaControls.tsx           | 13 ++++++++++---
 .../src/components/TankopediaSandbox/index.tsx      |  2 +-
 packages/website-ue/src/config/camera.ts            |  7 +++++++
 packages/website-ue/src/config/fov.ts               |  1 -
 4 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 packages/website-ue/src/config/camera.ts
 delete mode 100644 packages/website-ue/src/config/fov.ts

diff --git a/packages/website-ue/src/components/TankopediaControls.tsx b/packages/website-ue/src/components/TankopediaControls.tsx
index f9b6d88e9..26d8d08d5 100644
--- a/packages/website-ue/src/components/TankopediaControls.tsx
+++ b/packages/website-ue/src/components/TankopediaControls.tsx
@@ -2,7 +2,11 @@ import { I_HAT, J_HAT } from "@blitzkit/core";
 import { invalidate, useThree } from "@react-three/fiber";
 import { useEffect } from "react";
 import { Quaternion, Vector2, Vector3 } from "three";
-import { degToRad } from "three/src/math/MathUtils.js";
+import {
+  initialCameraPhi,
+  initialCameraR,
+  initialCameraTheta,
+} from "../config/camera";
 
 const clientPosition = new Vector2();
 const workingVector3 = new Vector3();
@@ -10,12 +14,14 @@ const workingQuaternion = new Quaternion();
 
 const cameraCenter = new Vector3(0, 1, 0);
 
+const PHI_EPSILON = 2 ** -8;
+
 export function TankopediaControls() {
   const canvas = useThree((state) => state.gl.domElement);
   const camera = useThree((state) => state.camera);
 
   useEffect(() => {
-    setCameraPosition(15, degToRad(90 - 20), degToRad(90 + 25));
+    setCameraPosition(initialCameraR, initialCameraPhi, initialCameraTheta);
 
     function handlePointerDown(event: PointerEvent) {
       clientPosition.set(event.clientX, event.clientY);
@@ -39,8 +45,9 @@ export function TankopediaControls() {
       const theta = Math.atan2(workingVector3.x, workingVector3.z) + dTheta;
       const phi0 = Math.acos(workingVector3.y / r);
       let phi = phi0 + dPhi;
+      const maxPhi = Math.PI / 2 + Math.asin(cameraCenter.y / r) - PHI_EPSILON;
 
-      if (phi < 0 || phi > Math.PI) phi = phi0;
+      if (phi < 0 || phi > maxPhi) phi = phi0;
 
       setCameraPosition(r, phi, theta);
     }
diff --git a/packages/website-ue/src/components/TankopediaSandbox/index.tsx b/packages/website-ue/src/components/TankopediaSandbox/index.tsx
index 4a511e693..c36cb50f7 100644
--- a/packages/website-ue/src/components/TankopediaSandbox/index.tsx
+++ b/packages/website-ue/src/components/TankopediaSandbox/index.tsx
@@ -1,6 +1,6 @@
 import { type StageParameters } from "@protos/blitz_static_tank_upgrade_single_stage";
 import { Canvas } from "@react-three/fiber";
-import { fov } from "../../config/fov";
+import { fov } from "../../config/camera";
 import { useTankChassisModel } from "../../hooks/useTankChassisModel";
 import { useTankGunModel } from "../../hooks/useTankGunModel";
 import { useTankHullModel } from "../../hooks/useTankHullModel";
diff --git a/packages/website-ue/src/config/camera.ts b/packages/website-ue/src/config/camera.ts
new file mode 100644
index 000000000..0667226b2
--- /dev/null
+++ b/packages/website-ue/src/config/camera.ts
@@ -0,0 +1,7 @@
+import { degToRad } from "three/src/math/MathUtils.js";
+
+export const fov = 20;
+
+export const initialCameraR = 15;
+export const initialCameraPhi = degToRad(90 - 10);
+export const initialCameraTheta = degToRad(90 + 15);
diff --git a/packages/website-ue/src/config/fov.ts b/packages/website-ue/src/config/fov.ts
deleted file mode 100644
index 67f0d8e1d..000000000
--- a/packages/website-ue/src/config/fov.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const fov = 20;