Flag Waver is an interactive 3D flag simulation tool that realistically animates flags with physics-based wind effects. It uses WebGL and Three.js to create a dynamic visualization where you can:
- Upload custom flag images or videos
- Control wind speed, direction, and behavior
- Adjust camera position using spherical coordinates
- Customize flag properties including size, mass, and hoisting orientation
- Change scenery with different backgrounds
The simulation uses realistic cloth physics to create natural flag movement, perfect for visualizing flag designs, testing visibility, or educational purposes.
Position Controls
r (Radius):Distance from target (4-80 units) - Use +/- buttons or input field
θ (Theta):Horizontal rotation (-180° to 180°) - Controls camera orbit horizontally
φ (Phi):Vertical rotation (0° to 180°) - Controls camera elevation
Target Controls
X, Y, Z:3D coordinates of camera focus point (±50 units each axis)
Note: Changing target moves camera position to maintain the same viewing angle
Reset Camera
Click the reset button to return to default view
Interactive Controls:
- Left-click drag: Orbit camera
- Scroll: Zoom in/out
- Right-click drag: Pan camera
Image Selection:
- • Upload custom image or video files
- • Supported formats: Images (PNG, JPG, GIF) and Videos
Dimensions:
- • Width: 0.5 - 4 meters (slider control)
- • Height: 0.5 - 3 meters (slider control)
- • Mass: 0.05 - 0.3 kg/m² (affects how flag responds to wind)
- • Match image proportions: Auto-adjust dimensions to image aspect ratio
Two-sided Option:
- • Enable to show different image on back side
- • Upload separate back side image when enabled
Hoisting (Flag Attachment):
- • Sinister: Left side attached to pole (less common)
- • Dexter: Right side attached to pole (standard)
Orientation:
- • Top, Left, Bottom, Right: Which edge is attached
Flagpole Type:
- • Standard: Vertical pole
- • Horizontal: Horizontal pole
- • Outrigger: Angled pole
- • Crossbar: T-shaped pole for vertical hanging
- • Gallery: Wall-mounted display
Vertical Hanging Method:
- • Rotate clockwise: Top becomes right side
- • Rotate and flip: Top becomes left side
- • No change: Keep original orientation
- (Only available with Crossbar flagpole)
Wind Toggle:Enable/disable wind simulation
Wind Control:Enable manual control over wind parameters
Direction:0-360 degrees with cardinal direction markers
- • N (0°): North - Wind from top
- • E (90°): East - Wind from right
- • S (180°): South - Wind from bottom
- • W (270°): West - Wind from left
Speed:0-30 m/s (meters per second)
- • 0-5 m/s: Light breeze
- • 5-15 m/s: Moderate wind
- • 15-30 m/s: Strong wind
Note:
Direction and Speed controls are only available when both Wind and Wind Control are enabled
Background Options:
- • Classic: Default gradient background
- • Blue sky: Clear blue sky gradient
- • Night sky with clouds: Dark sky with cloud effects
- • Custom: Set your own color and/or image
Custom Background (when selected):
- • Background color: Choose any color with color picker
- • Background image: Upload custom background image