From dc2f491fa9a9759fb19880515b61ea038984a28e Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 17:21:00 -0800
Subject: [PATCH] fix: Switch to Orthographic 3D view and use HTML labels

---
 .../src/components/facility3d/Room3DViewer.tsx | 18 ++++++++++++------
 .../src/components/facility3d/RoomObject.tsx   |  1 +
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/facility3d/Room3DViewer.tsx b/frontend/src/components/facility3d/Room3DViewer.tsx
index 43806c3..5b2fade 100644
--- a/frontend/src/components/facility3d/Room3DViewer.tsx
+++ b/frontend/src/components/facility3d/Room3DViewer.tsx
@@ -64,13 +64,14 @@ export function Room3DViewer({ room, visMode = 'STANDARD', onPlantClick }: Room3
         <div className="w-full h-[600px] bg-gradient-to-br from-slate-900 to-slate-950 rounded-2xl overflow-hidden border border-[var(--color-border-subtle)] relative">
             <Canvas
                 shadows
-                camera={{ position: [0, 40, 30], fov: 45 }}
+                orthographic
+                camera={{ position: [50, 40, 50], zoom: 8, near: -100, far: 200 }}
                 className="w-full h-full"
             >
-                <ambientLight intensity={0.5} />
-                <directionalLight position={[10, 20, 10]} intensity={1} castShadow />
+                <ambientLight intensity={0.6} />
+                <directionalLight position={[10, 40, 20]} intensity={1.2} castShadow />
 
-                <group position={[0, 0, 0]}>
+                <group position={[0, -5, 0]}>
                     <RoomObject
                         room={room3DData}
                         visMode={visMode}
@@ -85,9 +86,14 @@ export function Room3DViewer({ room, visMode = 'STANDARD', onPlantClick }: Room3
                     />
                 </group>
 
-                <ContactShadows position={[0, -0.01, 0]} opacity={0.4} scale={40} blur={2} far={10} />
+                <ContactShadows position={[0, -5.01, 0]} opacity={0.3} scale={60} blur={2.5} far={20} />
                 <Environment preset="city" />
-                <OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI / 2.2} />
+                <OrbitControls
+                    makeDefault
+                    enableRotate={true}
+                    maxPolarAngle={Math.PI / 2.5} // Limit vertical rotation to keep "looking down" feel
+                    minPolarAngle={Math.PI / 6}
+                />
             </Canvas>
 
             <div className="absolute bottom-4 right-4 bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10 text-xs font-medium text-white/80 pointer-events-none">
diff --git a/frontend/src/components/facility3d/RoomObject.tsx b/frontend/src/components/facility3d/RoomObject.tsx
index 5105d8d..0f6be41 100644
--- a/frontend/src/components/facility3d/RoomObject.tsx
+++ b/frontend/src/components/facility3d/RoomObject.tsx
@@ -5,6 +5,7 @@ import type { Room3D } from '../../lib/layoutApi';
 import { PlantPosition, VisMode, COLORS } from './types';
 import { SmartRack, HierarchyContext } from './SmartRack';
 import { RoomSummaryOverlay } from './SummaryOverlay';
+import { cn } from '../../lib/utils';
 
 // Convert pixel coordinates to world units
 const SCALE = 0.1;