An AI-powered 3D visualization platform for military equipment intelligence and Canadian Arctic maritime domain awareness. Built for the CyberSea Hackathon.

Cybersea combines interactive 3D model analysis with real-time Arctic patrol simulation capabilities for:

• Threat Identification - Real-time AI-driven component recognition of military equipment from 3D wireframe models
• Arctic Sovereignty Monitoring - Visualization and simulation of maritime patrol operations across the Northwest Passage
• Defense Technology Training - Interactive 3D model analysis for identifying and assessing weapon systems, vehicles, and tactical components
• Intelligence Gathering - Component breakdown and tactical assessment generation with AI-assisted analysis

• Framework: Next.js 16 with App Router, React 19, TypeScript 5
• 3D Graphics: Three.js with post-processing effects (bloom, composition)
• Animation: Framer Motion, GSAP
• AI: Google Gemini API for component identification and vision analysis
• Styling: Tailwind CSS 4

• Interactive 3D model viewer with holographic and solid rendering modes
• Component isolation - click to isolate individual parts
• Explosion animation - explode models into components with adjustable distance
• AI-powered component analysis via Gemini vision API
• Real-time component inspector
• Model export as GLB/JSON
• Guided onboarding overlay

• 3D Earth globe focused on Canadian Arctic
• Northwest Passage trade routes visualization
• Points of interest: military bases, ports, radar stations, resource sites
• Real-time mission progression with timeline events
• Command dashboard with weather conditions, threat levels, mission metrics
• Playback controls with speed adjustment (1x, 2x, 4x)

10 pre-loaded military equipment models with tactical specifications:

main/
├── public/
│   ├── models/              # GLB/GLTF 3D assets
│   └── annotations/         # Annotated reference images
├── src/
│   ├── app/
│   │   ├── page.tsx         # Landing page
│   │   ├── dashboard/       # Model viewer
│   │   ├── simulation/      # Arctic patrol simulation
│   │   └── api/             # API routes
│   ├── components/
│   │   ├── ModelViewer.tsx  # Main 3D viewer
│   │   ├── Globe.tsx        # Interactive 3D Earth
│   │   └── simulation/      # Simulation components
│   └── lib/
│       ├── demo-config.ts   # Model registry
│       └── simulation-data.ts # Arctic scenario data

• Node.js 18+
• npm or yarn

cd main
npm install

Create a .env.local file in the main directory:

GEMINI_API_KEY=your_gemini_api_key
SKETCHFAB_API_TOKEN=your_sketchfab_token  # Optional, for model fetching

npm run dev

Open http://localhost:3000 to view the application.

npm run build
npm start

Built for the uOttawa Hackathon.