feat: Implement 3D Radar View Controls - resolves #9

- Add Reset View button functionality to reset camera to default position
- Implement Auto Rotate toggle with visual feedback and button text updates
- Add Range slider (10-500km) with real-time aircraft distance filtering
- Use server-provided origin coordinates via /api/origin API endpoint
- Implement Haversine formula for accurate geographic distance calculations
- Add deferred initialization to prevent black screen issue
- Enhanced lighting and ground plane visibility for better 3D orientation
- Add comprehensive debugging and error handling for WebGL/Three.js
- Style 3D radar controls with proper CSS for consistent UI
- Remove construction notice as controls are now fully functional

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2025-09-01 20:22:26 +02:00
commit a2cf9d8fdb
3 changed files with 352 additions and 44 deletions

View file

@ -857,4 +857,60 @@ body {
.squawk-standard:hover {
background: #218838;
}
/* 3D Radar Styles */
#radar3d-view {
position: relative;
}
#radar3d-container {
flex: 1;
min-height: 500px;
width: 100%;
background: #0a0a0a;
position: relative;
}
.radar3d-controls {
display: flex;
gap: 1rem;
padding: 1rem;
background: #2d2d2d;
border-bottom: 1px solid #404040;
align-items: center;
}
.radar3d-controls button {
padding: 0.5rem 1rem;
background: #404040;
color: white;
border: 1px solid #666;
border-radius: 4px;
cursor: pointer;
}
.radar3d-controls button:hover:not(:disabled) {
background: #505050;
}
.radar3d-controls button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.radar3d-controls button.active {
background: #00a8ff;
border-color: #0088cc;
}
.radar3d-controls label {
display: flex;
gap: 0.5rem;
align-items: center;
color: #ccc;
}
.radar3d-controls input[type="range"] {
width: 150px;
}