diff --git a/frontend/src/components/facility3d/CameraPresets.tsx b/frontend/src/components/facility3d/CameraPresets.tsx index cbb0adf..c4fae2a 100644 --- a/frontend/src/components/facility3d/CameraPresets.tsx +++ b/frontend/src/components/facility3d/CameraPresets.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef } from 'react'; import { CameraControls } from '@react-three/drei'; -export type CameraPreset = 'OVERHEAD' | 'ISOMETRIC' | 'ROOM_FOCUS'; +export type CameraPreset = 'OVERHEAD' | 'ISOMETRIC'; interface CameraPresetsProps { preset: CameraPreset; @@ -18,13 +18,15 @@ const getPresetConfig = ( floorHeight: number, focusTarget?: { x: number; z: number } | null ) => { - const centerX = 0; - const centerZ = 0; const maxDim = Math.max(floorWidth, floorHeight); + // If we have a focus target, use it as center, otherwise use floor center + const centerX = focusTarget?.x ?? 0; + const centerZ = focusTarget?.z ?? 0; + switch (preset) { case 'OVERHEAD': - // Top-down view - looking straight down at full floor + // Top-down view - looking straight down return { position: [centerX, maxDim * 1.2, centerZ + 0.1] as [number, number, number], target: [centerX, 0, centerZ] as [number, number, number], @@ -32,27 +34,16 @@ const getPresetConfig = ( case 'ISOMETRIC': // 3/4 isometric view - classic strategy game angle - const isoDistance = maxDim * 0.8; + const isoDistance = focusTarget ? 15 : maxDim * 0.8; return { - position: [centerX + isoDistance, isoDistance * 0.7, centerZ + isoDistance] as [number, number, number], + position: [centerX + isoDistance * 0.7, isoDistance * 0.6, centerZ + isoDistance * 0.7] as [number, number, number], target: [centerX, 0, centerZ] as [number, number, number], }; - case 'ROOM_FOCUS': - // Focus on a specific room - position camera above looking down at room - const fx = focusTarget?.x ?? centerX; - const fz = focusTarget?.z ?? centerZ; - // Use a zoomed-in overhead-ish view centered on the room - // Height of 12 gives good room-level visibility - return { - position: [fx + 4, 12, fz + 4] as [number, number, number], - target: [fx, 0, fz] as [number, number, number], - }; - default: return { - position: [centerX + 40, 30, centerZ + 40] as [number, number, number], - target: [centerX, 0, centerZ] as [number, number, number], + position: [0, 30, 40] as [number, number, number], + target: [0, 0, 0] as [number, number, number], }; } }; @@ -108,9 +99,9 @@ export function CameraPresets({ // Polar angle limits (don't go below floor) minPolarAngle={0.1} maxPolarAngle={Math.PI / 2.1} - // Enable panning for room exploration + // Enable panning for exploration dollySpeed={1} - truckSpeed={preset === 'ROOM_FOCUS' ? 1 : 0.5} + truckSpeed={0.8} // Smooth damping smoothTime={0.25} makeDefault @@ -118,7 +109,7 @@ export function CameraPresets({ ); } -// UI Component for preset selector buttons +// UI Component for preset selector buttons - just two options now interface CameraPresetSelectorProps { current: CameraPreset; onChange: (preset: CameraPreset) => void; @@ -128,7 +119,6 @@ export function CameraPresetSelector({ current, onChange }: CameraPresetSelector const presets: { id: CameraPreset; label: string; icon: string }[] = [ { id: 'OVERHEAD', label: 'Overhead', icon: '⬇️' }, { id: 'ISOMETRIC', label: 'Isometric', icon: '📐' }, - { id: 'ROOM_FOCUS', label: 'Room', icon: '🔍' }, ]; return ( diff --git a/frontend/src/pages/Facility3DViewerPage.tsx b/frontend/src/pages/Facility3DViewerPage.tsx index 4d8066d..0fc09c1 100644 --- a/frontend/src/pages/Facility3DViewerPage.tsx +++ b/frontend/src/pages/Facility3DViewerPage.tsx @@ -90,7 +90,7 @@ export default function Facility3DViewerPage() { const plant: PlantPosition = { ...match, x, y, z }; setSelectedPlant(plant); setFocusTarget({ x, z }); - setCameraPreset('ROOM_FOCUS'); + setCameraPreset('ISOMETRIC'); setBeaconPosition([x, y, z]); setHighlightedTags([targetedPlantTag]); setDimMode(true); @@ -150,7 +150,7 @@ export default function Facility3DViewerPage() { const x = (room.posX + room.width / 2) * SCALE - (floorData.floor.width * SCALE / 2); const z = (room.posY + room.height / 2) * SCALE - (floorData.floor.height * SCALE / 2); setFocusTarget({ x, z }); - setCameraPreset('ROOM_FOCUS'); + setCameraPreset('ISOMETRIC'); // Clear search state when navigating by room setBeaconPosition(null); setHighlightedTags([]); @@ -194,7 +194,7 @@ export default function Facility3DViewerPage() { const y = 0.4 + (result.position.tier * 0.6); setFocusTarget({ x, z }); - setCameraPreset('ROOM_FOCUS'); + setCameraPreset('ISOMETRIC'); setBeaconPosition([x, y, z]); setHighlightedTags([result.label]); setDimMode(true); @@ -277,9 +277,6 @@ export default function Facility3DViewerPage() { current={cameraPreset} onChange={(preset) => { setCameraPreset(preset); - if (preset !== 'ROOM_FOCUS') { - setFocusTarget(null); - } }} /> @@ -355,7 +352,7 @@ export default function Facility3DViewerPage() { const y = 0.4 + (plant.tier * 0.6); setFocusTarget({ x, z }); - setCameraPreset('ROOM_FOCUS'); + setCameraPreset('ISOMETRIC'); setBeaconPosition([x, y, z]); setDimMode(false); setHighlightedTags([plant.plant?.tagNumber || '']);