[V0_FILE]markdown:file="README.md" # Flight simulator component *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/sudoselfs-projects/v0-flight-simulator-component) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/jb2OsycLzGd) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/sudoselfs-projects/v0-flight-simulator-component](https://vercel.com/sudoselfs-projects/v0-flight-simulator-component)** ## Build your app Continue building your app on: **[https://v0.app/chat/jb2OsycLzGd](https://v0.app/chat/jb2OsycLzGd)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import dynamic from "next/dynamic" const FlightSimulator = dynamic(() => import("@/components/flight-simulator"), { ssr: false, loading: () => (

Loading Flight Simulator...

), }) export default function Home() { return } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/flight-simulator.tsx" "use client" import type React from "react" import { useEffect, useRef, useState, useCallback } from "react" declare global { interface Window { Cesium: any } } // Flight physics constants for realism const FLIGHT_CONSTANTS = { // Aerodynamics MAX_SPEED: 300, // m/s (~580 knots) MIN_SPEED: 30, // m/s (~58 knots) - stall speed approximation CRUISE_SPEED: 150, // m/s // Control rates (radians per second) MAX_PITCH_RATE: 0.5, MAX_ROLL_RATE: 1.2, MAX_YAW_RATE: 0.3, // Damping coefficients (higher = more damping) PITCH_DAMPING: 0.92, ROLL_DAMPING: 0.85, YAW_DAMPING: 0.95, // Control sensitivity PITCH_SENSITIVITY: 0.8, ROLL_SENSITIVITY: 1.0, YAW_SENSITIVITY: 0.6, // Aerodynamic factors LIFT_COEFFICIENT: 0.05, DRAG_COEFFICIENT: 0.01, TURN_COORDINATION_FACTOR: 0.3, // Throttle response THROTTLE_RESPONSE: 25, // m/s² acceleration IDLE_THROTTLE: 0.1, // Realistic altitude effects ALTITUDE_DENSITY_FACTOR: 0.00001, // Air density effect } const FlightSimulator = () => { const cesiumContainerRef = useRef(null) const viewerRef = useRef(null) const entityRef = useRef(null) const [speed, setSpeed] = useState(150) const [altitude, setAltitude] = useState(5000) const [heading, setHeading] = useState(0) const [showControls, setShowControls] = useState(true) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [zoomedOut, setZoomedOut] = useState(false) const [throttle, setThrottle] = useState(70) const isInitializedRef = useRef(false) const touchStartRef = useRef<{ x: number; y: number; id: number } | null>(null) const throttleTouchRef = useRef<{ startY: number; startThrottle: number; id: number } | null>(null) const flightStateRef = useRef({ heading: 0, pitch: 0, roll: 0, speed: 150, lon: -104.822257, lat: 38.814921, altitude: 5000, verticalSpeed: 0, throttle: 70, pitchRate: 0, rollRate: 0, yawRate: 0, gForce: 1.0, }) const keysRef = useRef>({}) const animationFrameRef = useRef(null) const lastTimeRef = useRef(performance.now()) const zoomedOutRef = useRef(false) useEffect(() => { zoomedOutRef.current = zoomedOut }, [zoomedOut]) const updateCamera = useCallback((planePosition: any, planeOrientation: any) => { const Cesium = window.Cesium if (!Cesium || !viewerRef.current || !planePosition || !planeOrientation) return try { const offset = zoomedOutRef.current ? new Cesium.Cartesian3(-2000, -500, 800) : new Cesium.Cartesian3(-800, -200, 300) const rotationMatrix = Cesium.Matrix3.fromQuaternion(planeOrientation) const rotatedOffset = Cesium.Matrix3.multiplyByVector(rotationMatrix, offset, new Cesium.Cartesian3()) const cameraPosition = Cesium.Cartesian3.add(planePosition, rotatedOffset, new Cesium.Cartesian3()) // Look slightly ahead of the plane for better visibility const lookAhead = Cesium.Matrix3.multiplyByVector( rotationMatrix, new Cesium.Cartesian3(100, 0, 0), new Cesium.Cartesian3() ) const targetPosition = Cesium.Cartesian3.add(planePosition, lookAhead, new Cesium.Cartesian3()) const direction = Cesium.Cartesian3.normalize( Cesium.Cartesian3.subtract(targetPosition, cameraPosition, new Cesium.Cartesian3()), new Cesium.Cartesian3(), ) const up = Cesium.Matrix3.multiplyByVector(rotationMatrix, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()) viewerRef.current.camera.setView({ destination: cameraPosition, orientation: { direction: direction, up: up, }, }) } catch (e) { console.error("Camera update error:", e) } }, []) const handleFlightTouchStart = useCallback((e: React.TouchEvent) => { e.preventDefault() const touch = e.touches[0] touchStartRef.current = { x: touch.clientX, y: touch.clientY, id: touch.identifier } }, []) const handleFlightTouchMove = useCallback((e: React.TouchEvent) => { e.preventDefault() if (!touchStartRef.current) return const touch = Array.from(e.touches).find((t) => t.identifier === touchStartRef.current?.id) if (!touch) return const deltaX = touch.clientX - touchStartRef.current.x const deltaY = touch.clientY - touchStartRef.current.y const sensitivity = 0.4 // Update touch start for continuous control touchStartRef.current.x = touch.clientX touchStartRef.current.y = touch.clientY // Horizontal drag = roll (more realistic banking) if (Math.abs(deltaX) > 2) { const rollAmount = (deltaX / 100) * sensitivity flightStateRef.current.rollRate = Math.max( -FLIGHT_CONSTANTS.MAX_ROLL_RATE, Math.min(FLIGHT_CONSTANTS.MAX_ROLL_RATE, rollAmount) ) } // Vertical drag = pitch if (Math.abs(deltaY) > 2) { const pitchAmount = (deltaY / 100) * sensitivity flightStateRef.current.pitchRate = Math.max( -FLIGHT_CONSTANTS.MAX_PITCH_RATE, Math.min(FLIGHT_CONSTANTS.MAX_PITCH_RATE, -pitchAmount) ) } }, []) const handleFlightTouchEnd = useCallback((e: React.TouchEvent) => { const remainingTouches = Array.from(e.touches) if (!remainingTouches.find((t) => t.identifier === touchStartRef.current?.id)) { touchStartRef.current = null // Gradually reduce control rates instead of instantly stopping flightStateRef.current.pitchRate *= 0.5 flightStateRef.current.rollRate *= 0.5 } }, []) const handleThrottleTouchStart = useCallback((e: React.TouchEvent) => { e.preventDefault() e.stopPropagation() const touch = e.touches[0] throttleTouchRef.current = { startY: touch.clientY, startThrottle: flightStateRef.current.throttle, id: touch.identifier, } }, []) const handleThrottleTouchMove = useCallback((e: React.TouchEvent) => { e.preventDefault() e.stopPropagation() if (!throttleTouchRef.current) return const touch = Array.from(e.touches).find((t) => t.identifier === throttleTouchRef.current?.id) if (!touch) return const deltaY = throttleTouchRef.current.startY - touch.clientY const newThrottle = Math.max(0, Math.min(100, throttleTouchRef.current.startThrottle + deltaY * 0.5)) flightStateRef.current.throttle = newThrottle setThrottle(Math.round(newThrottle)) }, []) const handleThrottleTouchEnd = useCallback((e: React.TouchEvent) => { e.stopPropagation() const remainingTouches = Array.from(e.touches) if (!remainingTouches.find((t) => t.identifier === throttleTouchRef.current?.id)) { throttleTouchRef.current = null } }, []) const calculateAerodynamicForces = useCallback((dt: number) => { const flight = flightStateRef.current // Air density effect (reduces with altitude) const densityFactor = Math.max(0.3, 1 - flight.altitude * FLIGHT_CONSTANTS.ALTITUDE_DENSITY_FACTOR) // Stall warning - reduced control authority at low speed const speedRatio = (flight.speed - FLIGHT_CONSTANTS.MIN_SPEED) / (FLIGHT_CONSTANTS.MAX_SPEED - FLIGHT_CONSTANTS.MIN_SPEED) const controlEffectiveness = Math.max(0.2, Math.min(1, speedRatio)) // Drag calculation const drag = FLIGHT_CONSTANTS.DRAG_COEFFICIENT * flight.speed * flight.speed * densityFactor // Lift calculation (simplified) const lift = FLIGHT_CONSTANTS.LIFT_COEFFICIENT * flight.speed * flight.speed * densityFactor * Math.cos(flight.roll) // Thrust based on throttle setting const thrust = (flight.throttle / 100) * FLIGHT_CONSTANTS.MAX_SPEED * FLIGHT_CONSTANTS.THROTTLE_RESPONSE // Net acceleration const acceleration = (thrust - drag) * dt // Update speed with realistic acceleration const newSpeed = flight.speed + acceleration flight.speed = Math.max(FLIGHT_CONSTANTS.MIN_SPEED, Math.min(FLIGHT_CONSTANTS.MAX_SPEED, newSpeed)) // Vertical speed from pitch and lift flight.verticalSpeed = lift * Math.sin(flight.pitch) * controlEffectiveness // Turn coordination (bank and turn relationship) if (Math.abs(flight.roll) > 0.1) { const turnRate = FLIGHT_CONSTANTS.TURN_COORDINATION_FACTOR * flight.speed * Math.sin(flight.roll) / 1000 flight.yawRate = turnRate * controlEffectiveness } else { flight.yawRate *= FLIGHT_CONSTANTS.YAW_DAMPING } return { controlEffectiveness, densityFactor } }, []) const startFlightLoop = useCallback(() => { const updateFlight = () => { const currentTime = performance.now() const dt = Math.min((currentTime - lastTimeRef.current) / 1000, 0.1) lastTimeRef.current = currentTime const keys = keysRef.current const flight = flightStateRef.current const Cesium = window.Cesium if (Cesium && viewerRef.current && !viewerRef.current.isDestroyed()) { // Calculate aerodynamic forces const { controlEffectiveness } = calculateAerodynamicForces(dt) // Handle pitch controls with realistic rates if (keys["w"] || keys["arrowup"]) { flight.pitchRate = Math.min( flight.pitchRate + FLIGHT_CONSTANTS.PITCH_SENSITIVITY * dt, FLIGHT_CONSTANTS.MAX_PITCH_RATE * controlEffectiveness ) } else if (keys["s"] || keys["arrowdown"]) { flight.pitchRate = Math.max( flight.pitchRate - FLIGHT_CONSTANTS.PITCH_SENSITIVITY * dt, -FLIGHT_CONSTANTS.MAX_PITCH_RATE * controlEffectiveness ) } else { // Natural pitch damping flight.pitchRate *= FLIGHT_CONSTANTS.PITCH_DAMPING } // Handle roll controls with coordinated turns if (keys["a"] || keys["arrowleft"]) { flight.rollRate = Math.max( flight.rollRate - FLIGHT_CONSTANTS.ROLL_SENSITIVITY * dt, -FLIGHT_CONSTANTS.MAX_ROLL_RATE * controlEffectiveness ) } else if (keys["d"] || keys["arrowright"]) { flight.rollRate = Math.min( flight.rollRate + FLIGHT_CONSTANTS.ROLL_SENSITIVITY * dt, FLIGHT_CONSTANTS.MAX_ROLL_RATE * controlEffectiveness ) } else { // Natural roll damping with tendency to level wings flight.rollRate *= FLIGHT_CONSTANTS.ROLL_DAMPING if (Math.abs(flight.roll) > 0.05) { flight.rollRate -= flight.roll * 0.5 * dt // Self-leveling tendency } } // Apply pitch and roll rates flight.pitch = Math.max(-0.7, Math.min(0.7, flight.pitch + flight.pitchRate * dt)) flight.roll = Math.max(-1.2, Math.min(1.2, flight.roll + flight.rollRate * dt)) // Apply yaw (heading change) from coordinated turns flight.heading += flight.yawRate * dt // Throttle controls if (keys["shift"]) { flight.throttle = Math.min(flight.throttle + 40 * dt, 100) setThrottle(Math.round(flight.throttle)) } if (keys["control"] || keys["ctrl"]) { flight.throttle = Math.max(flight.throttle - 40 * dt, 0) setThrottle(Math.round(flight.throttle)) } // Altitude controls with realistic climb/descent rates const climbRate = 400 // m/s max climb rate if (keys["q"]) { flight.verticalSpeed = Math.max(flight.verticalSpeed - climbRate * dt, -climbRate) } else if (keys["e"]) { flight.verticalSpeed = Math.min(flight.verticalSpeed + climbRate * dt, climbRate) } // Update altitude from vertical speed flight.altitude += flight.verticalSpeed * dt flight.altitude = Math.max(100, Math.min(50000, flight.altitude)) // Calculate ground movement with realistic physics const metersPerDegree = 111320 const groundSpeed = flight.speed * Math.cos(flight.pitch) // The Cesium Air model's forward axis is rotated 90 degrees from standard heading const moveHeading = flight.heading + Math.PI / 2 const dLon = (groundSpeed * Math.sin(moveHeading) * dt) / (metersPerDegree * Math.cos((flight.lat * Math.PI) / 180)) const dLat = (groundSpeed * Math.cos(moveHeading) * dt) / metersPerDegree flight.lon += dLon flight.lat += dLat // Keep heading in 0-2π range flight.heading = flight.heading % (2 * Math.PI) if (flight.heading < 0) flight.heading += 2 * Math.PI // Update entity with new position and orientation if (entityRef.current) { try { const position = Cesium.Cartesian3.fromDegrees(flight.lon, flight.lat, flight.altitude) const hpr = new Cesium.HeadingPitchRoll(flight.heading, flight.pitch, flight.roll) const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr) entityRef.current.position = position entityRef.current.orientation = orientation updateCamera(position, orientation) } catch (e) { console.error("Entity update error:", e) } } // Update UI with rounded values setSpeed(Math.round(flight.speed)) setAltitude(Math.round(flight.altitude)) setHeading(Math.round(((flight.heading * 180) / Math.PI + 360) % 360)) } animationFrameRef.current = requestAnimationFrame(updateFlight) } animationFrameRef.current = requestAnimationFrame(updateFlight) }, [calculateAerodynamicForces, updateCamera]) const createAirplane = useCallback((viewer: any) => { const Cesium = window.Cesium const flight = flightStateRef.current const position = Cesium.Cartesian3.fromDegrees(flight.lon, flight.lat, flight.altitude) const hpr = new Cesium.HeadingPitchRoll(flight.heading, flight.pitch, flight.roll) const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr) const entity = viewer.entities.add({ position: position, orientation: orientation, model: { uri: "https://raw.githubusercontent.com/CesiumGS/cesium/main/Apps/SampleData/models/CesiumAir/Cesium_Air.glb", minimumPixelSize: 128, maximumScale: 20000, scale: 50, }, }) entityRef.current = entity }, []) const initCesium = useCallback(async () => { const Cesium = window.Cesium if (!Cesium) { setError("Cesium failed to load") setIsLoading(false) return } Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NjAyYjRkOS1jY2FjLTQ4MzMtODE1Yi0xYTgyYmZkOTY4NjUiLCJpZCI6Mzc0MDkxLCJpYXQiOjE3NjcxOTgyMjd9.3jmS5KYGcEWPSy-j7HX2FbMJ_bP4eJlyR3YPMZ4tMvc" if (!cesiumContainerRef.current) { setIsLoading(false) return } try { let terrainProvider try { terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(1) } catch (terrainError) { console.warn("Failed to load terrain, using ellipsoid:", terrainError) terrainProvider = new Cesium.EllipsoidTerrainProvider() } const viewer = new Cesium.Viewer(cesiumContainerRef.current, { infoBox: false, selectionIndicator: false, shadows: true, shouldAnimate: true, baseLayerPicker: false, geocoder: false, homeButton: false, navigationHelpButton: false, sceneModePicker: false, timeline: false, animation: false, fullscreenButton: false, scene3DOnly: true, terrainProvider: terrainProvider, skyBox: new Cesium.SkyBox({ sources: { positiveX: Cesium.buildModuleUrl("Assets/Textures/SkyBox/tycho2t3_80_px.jpg"), negativeX: Cesium.buildModuleUrl("Assets/Textures/SkyBox/tycho2t3_80_mx.jpg"), positiveY: Cesium.buildModuleUrl("Assets/Textures/SkyBox/tycho2t3_80_py.jpg"), negativeY: Cesium.buildModuleUrl("Assets/Textures/SkyBox/tycho2t3_80_my.jpg"), positiveZ: Cesium.buildModuleUrl("Assets/Textures/SkyBox/tycho2t3_80_pz.jpg"), negativeZ: Cesium.buildModuleUrl("Assets/Textures/SkyBox/tycho2t3_80_mz.jpg"), }, }), skyAtmosphere: new Cesium.SkyAtmosphere(), }) viewerRef.current = viewer viewer.entities.removeAll() createAirplane(viewer) startFlightLoop() setIsLoading(false) if (cesiumContainerRef.current) { cesiumContainerRef.current.tabIndex = 0 cesiumContainerRef.current.focus() } } catch (error) { console.error("Error initializing Cesium:", error) setError("Failed to initialize flight simulator") setIsLoading(false) } }, [createAirplane, startFlightLoop]) useEffect(() => { if (isInitializedRef.current) return isInitializedRef.current = true const loadCesium = () => { if (window.Cesium) { initCesium() return } const link = document.createElement("link") link.rel = "stylesheet" link.href = "https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Widgets/widgets.css" document.head.appendChild(link) const script = document.createElement("script") script.src = "https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Cesium.js" script.async = true script.onload = () => { initCesium() } script.onerror = () => { setError("Failed to load Cesium library") setIsLoading(false) } document.body.appendChild(script) } loadCesium() const handleKeyDown = (e: KeyboardEvent) => { const key = e.key.toLowerCase() if ( ["w", "a", "s", "d", "arrowup", "arrowdown", "arrowleft", "arrowright", "shift", "control", "q", "e"].includes( key, ) ) { e.preventDefault() } keysRef.current[key] = true } const handleKeyUp = (e: KeyboardEvent) => { keysRef.current[e.key.toLowerCase()] = false // Don't instantly stop control rates - let them damp naturally if (["w", "s", "arrowup", "arrowdown"].includes(e.key.toLowerCase())) { flightStateRef.current.pitchRate *= 0.7 } if (["a", "d", "arrowleft", "arrowright"].includes(e.key.toLowerCase())) { flightStateRef.current.rollRate *= 0.7 } } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (viewerRef.current && !viewerRef.current.isDestroyed()) { viewerRef.current.destroy() } } }, [initCesium]) const handleThrottleChange = useCallback((value: number) => { setThrottle(value) flightStateRef.current.throttle = value }, []) if (error) { return (

{error}

) } return (

{isLoading && (

Loading Flight Simulator...

)}

Speed: {speed} m/s

Altitude: {altitude} m

Heading: {heading}°

Throttle: {throttle}%

Click to activate controls

{/* Desktop throttle slider */}

THROTTLE

handleThrottleChange(Number(e.target.value))} className="w-32 h-2 bg-white/20 rounded-lg appearance-none cursor-pointer accent-amber-500 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-amber-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-amber-500 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer" /> {throttle}%

{showControls && (

Flight Controls

W / ↑ Pitch Up

S / ↓ Pitch Down

A / ← Bank Left

D / → Bank Right

Shift Increase Throttle

Ctrl Decrease Throttle

Q Descend

E Ascend

*Realistic aerodynamics: bank to turn, pitch for climb

)} {!showControls && ( )}

{/* Left side - flight control gesture zone */}

SWIPE TO FLY

↑ Pitch Up
↓ Pitch Down
← Bank Left
→ Bank Right

{/* Right side - throttle gesture zone */}

THROTTLE

{throttle}

↑ Slide Up = Faster
↓ Slide Down = Slower

{/* Altitude quick buttons - small and out of the way */}

ALT

) } export default FlightSimulator [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]plaintext:file="public/aircraft.glb" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/DZyxo9unUq6wPZF5AMu8xY/public/aircraft.glb" [V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" [V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ldsG0tzSnK1ZkSlQLBCaC50z94Qk/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"