fix: remove broken Room view, simplify to Overhead/Isometric
- Remove ROOM_FOCUS preset (wasn't rendering correctly) - Keep Overhead and Isometric views which work well - FocusTarget now zooms within current preset - Text navigation provides room selection
This commit is contained in:
parent
6d107c637b
commit
c282943ec3
2 changed files with 17 additions and 30 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
import { useEffect, useRef } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
import { CameraControls } from '@react-three/drei';
|
import { CameraControls } from '@react-three/drei';
|
||||||
|
|
||||||
export type CameraPreset = 'OVERHEAD' | 'ISOMETRIC' | 'ROOM_FOCUS';
|
export type CameraPreset = 'OVERHEAD' | 'ISOMETRIC';
|
||||||
|
|
||||||
interface CameraPresetsProps {
|
interface CameraPresetsProps {
|
||||||
preset: CameraPreset;
|
preset: CameraPreset;
|
||||||
|
|
@ -18,13 +18,15 @@ const getPresetConfig = (
|
||||||
floorHeight: number,
|
floorHeight: number,
|
||||||
focusTarget?: { x: number; z: number } | null
|
focusTarget?: { x: number; z: number } | null
|
||||||
) => {
|
) => {
|
||||||
const centerX = 0;
|
|
||||||
const centerZ = 0;
|
|
||||||
const maxDim = Math.max(floorWidth, floorHeight);
|
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) {
|
switch (preset) {
|
||||||
case 'OVERHEAD':
|
case 'OVERHEAD':
|
||||||
// Top-down view - looking straight down at full floor
|
// Top-down view - looking straight down
|
||||||
return {
|
return {
|
||||||
position: [centerX, maxDim * 1.2, centerZ + 0.1] as [number, number, number],
|
position: [centerX, maxDim * 1.2, centerZ + 0.1] as [number, number, number],
|
||||||
target: [centerX, 0, centerZ] as [number, number, number],
|
target: [centerX, 0, centerZ] as [number, number, number],
|
||||||
|
|
@ -32,27 +34,16 @@ const getPresetConfig = (
|
||||||
|
|
||||||
case 'ISOMETRIC':
|
case 'ISOMETRIC':
|
||||||
// 3/4 isometric view - classic strategy game angle
|
// 3/4 isometric view - classic strategy game angle
|
||||||
const isoDistance = maxDim * 0.8;
|
const isoDistance = focusTarget ? 15 : maxDim * 0.8;
|
||||||
return {
|
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],
|
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:
|
default:
|
||||||
return {
|
return {
|
||||||
position: [centerX + 40, 30, centerZ + 40] as [number, number, number],
|
position: [0, 30, 40] as [number, number, number],
|
||||||
target: [centerX, 0, centerZ] 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)
|
// Polar angle limits (don't go below floor)
|
||||||
minPolarAngle={0.1}
|
minPolarAngle={0.1}
|
||||||
maxPolarAngle={Math.PI / 2.1}
|
maxPolarAngle={Math.PI / 2.1}
|
||||||
// Enable panning for room exploration
|
// Enable panning for exploration
|
||||||
dollySpeed={1}
|
dollySpeed={1}
|
||||||
truckSpeed={preset === 'ROOM_FOCUS' ? 1 : 0.5}
|
truckSpeed={0.8}
|
||||||
// Smooth damping
|
// Smooth damping
|
||||||
smoothTime={0.25}
|
smoothTime={0.25}
|
||||||
makeDefault
|
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 {
|
interface CameraPresetSelectorProps {
|
||||||
current: CameraPreset;
|
current: CameraPreset;
|
||||||
onChange: (preset: CameraPreset) => void;
|
onChange: (preset: CameraPreset) => void;
|
||||||
|
|
@ -128,7 +119,6 @@ export function CameraPresetSelector({ current, onChange }: CameraPresetSelector
|
||||||
const presets: { id: CameraPreset; label: string; icon: string }[] = [
|
const presets: { id: CameraPreset; label: string; icon: string }[] = [
|
||||||
{ id: 'OVERHEAD', label: 'Overhead', icon: '⬇️' },
|
{ id: 'OVERHEAD', label: 'Overhead', icon: '⬇️' },
|
||||||
{ id: 'ISOMETRIC', label: 'Isometric', icon: '📐' },
|
{ id: 'ISOMETRIC', label: 'Isometric', icon: '📐' },
|
||||||
{ id: 'ROOM_FOCUS', label: 'Room', icon: '🔍' },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@ export default function Facility3DViewerPage() {
|
||||||
const plant: PlantPosition = { ...match, x, y, z };
|
const plant: PlantPosition = { ...match, x, y, z };
|
||||||
setSelectedPlant(plant);
|
setSelectedPlant(plant);
|
||||||
setFocusTarget({ x, z });
|
setFocusTarget({ x, z });
|
||||||
setCameraPreset('ROOM_FOCUS');
|
setCameraPreset('ISOMETRIC');
|
||||||
setBeaconPosition([x, y, z]);
|
setBeaconPosition([x, y, z]);
|
||||||
setHighlightedTags([targetedPlantTag]);
|
setHighlightedTags([targetedPlantTag]);
|
||||||
setDimMode(true);
|
setDimMode(true);
|
||||||
|
|
@ -150,7 +150,7 @@ export default function Facility3DViewerPage() {
|
||||||
const x = (room.posX + room.width / 2) * SCALE - (floorData.floor.width * SCALE / 2);
|
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);
|
const z = (room.posY + room.height / 2) * SCALE - (floorData.floor.height * SCALE / 2);
|
||||||
setFocusTarget({ x, z });
|
setFocusTarget({ x, z });
|
||||||
setCameraPreset('ROOM_FOCUS');
|
setCameraPreset('ISOMETRIC');
|
||||||
// Clear search state when navigating by room
|
// Clear search state when navigating by room
|
||||||
setBeaconPosition(null);
|
setBeaconPosition(null);
|
||||||
setHighlightedTags([]);
|
setHighlightedTags([]);
|
||||||
|
|
@ -194,7 +194,7 @@ export default function Facility3DViewerPage() {
|
||||||
const y = 0.4 + (result.position.tier * 0.6);
|
const y = 0.4 + (result.position.tier * 0.6);
|
||||||
|
|
||||||
setFocusTarget({ x, z });
|
setFocusTarget({ x, z });
|
||||||
setCameraPreset('ROOM_FOCUS');
|
setCameraPreset('ISOMETRIC');
|
||||||
setBeaconPosition([x, y, z]);
|
setBeaconPosition([x, y, z]);
|
||||||
setHighlightedTags([result.label]);
|
setHighlightedTags([result.label]);
|
||||||
setDimMode(true);
|
setDimMode(true);
|
||||||
|
|
@ -277,9 +277,6 @@ export default function Facility3DViewerPage() {
|
||||||
current={cameraPreset}
|
current={cameraPreset}
|
||||||
onChange={(preset) => {
|
onChange={(preset) => {
|
||||||
setCameraPreset(preset);
|
setCameraPreset(preset);
|
||||||
if (preset !== 'ROOM_FOCUS') {
|
|
||||||
setFocusTarget(null);
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -355,7 +352,7 @@ export default function Facility3DViewerPage() {
|
||||||
const y = 0.4 + (plant.tier * 0.6);
|
const y = 0.4 + (plant.tier * 0.6);
|
||||||
|
|
||||||
setFocusTarget({ x, z });
|
setFocusTarget({ x, z });
|
||||||
setCameraPreset('ROOM_FOCUS');
|
setCameraPreset('ISOMETRIC');
|
||||||
setBeaconPosition([x, y, z]);
|
setBeaconPosition([x, y, z]);
|
||||||
setDimMode(false);
|
setDimMode(false);
|
||||||
setHighlightedTags([plant.plant?.tagNumber || '']);
|
setHighlightedTags([plant.plant?.tagNumber || '']);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue