A highly advanced 3D drone flight simulator built with Three.js, featuring realistic physics, AI object detection, and comprehensive telemetry systems.
-
Realistic Flight Physics
- Gravity and air resistance simulation
- Momentum-based acceleration for smooth movement
- Dynamic drag coefficient that increases with speed
- Battery drain system affecting performance
- Altitude limits and collision detection with smooth bouncing
-
Advanced Drone Model
- Detailed drone mesh with propellers, arms, and landing gear
- Realistic propeller animations synchronized with speed
- LED lights (green front, red rear) with point light glows
- Camera housing with lens detail
- Working headlight with spotlight and adjustable intensity
- Tilt animation based on movement direction
-
6 Dynamic Environments
- 🌞 City Day - Bright daylight with green landscape
- 🌅 Sunset - Warm orange tones, dramatic lighting
- 🌃 Night City - Low light with artificial street lighting
- 🏜️ Desert - High visibility, extreme sun intensity
- 🌧️ Stormy - Reduced visibility with atmospheric fog
- ☁️ Overcast - Soft, diffuse lighting
-
Dynamic Lighting
- Ambient light that adjusts per environment
- Hemisphere lighting for natural sky effects
- Directional sun that follows drone for consistent shadows
- Environment-specific light intensity presets
-
Wind System
- Dynamic wind direction and speed simulation
- Gust events with random timing
- Wind effects scale with altitude
- Visual indication in performance HUD
-
Battery Management
- Realistic battery drain (0-100%)
- Drain rate increases with speed and thrust
- Low battery warning (< 20% turns red)
- Performance degradation when battery is critical
-
Improved Collision System
- Ground collision with bounce reduction
- Altitude limits with velocity clamping
- Smooth horizontal speed limiting
-
Third-Person View
- Drone-following camera with smooth lerp interpolation
- Adjustable offset and look-ahead distance
- Dynamic sun positioning relative to drone
-
First-Person Drone Camera (FPV)
- Mounted on drone's camera housing
- Fullscreen toggle capability
- Real-time rendering to canvas
- Brightness and contrast enhancement
- Scan line effect for cinematic feel
- Timestamp overlay with recording indicator
-
COCO-SSD Real-Time Detection
- Multi-class object detection on drone camera feed
- Bounding box visualization with object labels
- Confidence score display
- Color-coded boxes per object class
- Performance-optimized (100ms update interval)
-
Detectable Classes
- person, car, truck, bus
- motorcycle, bicycle
- traffic light, stop sign
- Dynamic color coding for easy identification
-
Flight Recording
- Automatic recording of all flight parameters
- CSV export with full trajectory data
- Position, velocity, rotation tracking
- Speed calculations
- Playback potential for analysis
-
Real-Time HUD Display
- Altitude (meters)
- Speed (m/s)
- GPS Position coordinates
- Heading (degrees)
- Battery percentage (dynamic color)
- FPS counter
- Frame time monitoring
- Wind speed indicator
-
Drone Telemetry Panel
- Real-time flight data
- Battery status with color coding
- Located bottom-left of screen
-
Performance Monitor
- FPS counter
- Frame time in milliseconds
- Wind speed display
- Drone position in real-time
-
Detection Info Panel
- Active object detection count
- Model loading status
- Detected objects list with counts
- Located top-right of screen
-
Control Guide
- Comprehensive keyboard mapping
- Located bottom-right of screen
- Always visible reference
| Key | Action |
|---|---|
| W | Move Forward |
| S | Move Backward |
| A | Strafe Left |
| D | Strafe Right |
| Q | Rotate Left |
| E | Rotate Right |
| Space | Ascend (Increase Altitude) |
| Shift | Descend (Decrease Altitude) |
| Key | Action |
|---|---|
| C | Toggle Drone Camera (FPV) Fullscreen |
| M | Switch Environment |
| Key | Action |
|---|---|
| R | Reset Drone Position |
| L | Toggle Headlight |
| V | Record/Stop Flight Recording |
- Max Speed: 120 m/s (horizontal)
- Max Vertical Speed: 50 m/s
- Gravity: 15 m/s²
- Acceleration: 80 units/s
- Max Altitude: 500 meters
- Min Altitude: 2 meters (ground level)
- Starting Capacity: 100%
- Drain Rate: 0.5% per second (base)
- Speed Multiplier: +50% drain at max speed
- Thrust Multiplier: +30% drain when actively ascending
- Speed Range: 0-40 m/s
- Gust Frequency: 2-5 second intervals
- Gust Strength: 0-15 m/s additional
- Altitude Impact: Wind effect reduces with height
- Model: COCO-SSD (MobileNetv2)
- Update Rate: 100ms per detection cycle
- Resolution: 320x240 (windowed), adaptive (fullscreen)
- GPU Accelerated: TensorFlow.js + WASM
- Ensure you have a modern web browser (Chrome, Firefox, Edge, Safari)
- Clone or download this project
- Open
index.htmlin your browser - Wait for the loading spinner to disappear
- Start flying!
- Start at altitude 0 and press Space to take off
- Use W/A/S/D to move, Q/E to rotate
- Press L to enable headlight for better visibility
- Press M to change environments and find your favorite
- Press C to switch to drone camera view
- Monitor battery level - it drains faster at high speeds
- Check wind indicator on performance HUD
- Wind indicator shows current wind speed and direction
- Wind effects increase at lower altitudes
- Gust events occur randomly every 2-5 seconds
- Practice flying in strong wind for challenge
- Plan long flights carefully - battery drains continuously
- Battery drains faster when:
- Flying at high speeds
- Continuously ascending
- Using headlight
- Performance decreases when battery drops below 20%
- Flight recordings export as CSV files
- Data includes: time, position (X,Y,Z), velocity components, heading, speed
- Use for performance analysis or flight review
- Timestamped with creation date
- Detection runs continuously on drone camera feed
- Bounding boxes show in both windowed and fullscreen modes
- Detection info panel shows real-time object counts
- Useful for surveillance and tracking scenarios
- Clear blue sky, bright green grass
- Full lighting conditions
- Best for general flight practice
- Orange sky, warm lighting
- Reduced visibility, dramatic shadows
- Ideal for scenic flying
- Low ambient light
- Street lights and building windows visible
- Headlight essential
- Challenge mode
- Vast open terrain
- High visibility
- Extreme sun intensity
- Test your speed here
- Heavy fog
- Reduced visibility
- Challenging flying conditions
- Windier than other environments
- Soft diffuse lighting
- Medium visibility
- Balanced conditions
-
Fixed: Three.js uniform rendering error (
Cannot read properties of undefined)- Removed problematic
map: nullproperties from materials - All materials now render without errors
- Removed problematic
-
Enhanced: Physics system with momentum-based acceleration
-
Added: Battery drain simulation
-
Added: Wind and gust system
-
Added: Flight recording and CSV export
-
Added: Performance monitoring (FPS, frame time)
-
Improved: Drone model tilt and movement responsiveness
- Three.js 0.160.0 - 3D rendering
- TensorFlow.js 4.10.0 - Machine learning
- COCO-SSD 2.2.3 - Object detection model
- WebGL 2.0 support
- Modern JavaScript (ES6+)
- Canvas 2D API
- Web Workers (for TensorFlow)
- Waypoint navigation system
- Autonomous flight modes
- Multi-drone coordination
- Improved weather effects (rain, snow)
- Terrain elevation maps
- Custom flight missions
- Flight history/playback
- Performance optimization (LOD system)
- Mobile/touch controls
- Online multiplayer
This project is open source. Feel free to modify and extend it!
Contributions are welcome! Feel free to:
- Report bugs
- Suggest features
- Submit improvements
- Create new environments
- Optimize performance
If you encounter issues:
- Check console for error messages (F12)
- Ensure your browser supports WebGL
- Try a different browser
- Clear browser cache and reload
- Check that JavaScript is enabled
Enjoy flying! 🚁✨