FourForces
An interactive 3D visualization of the four aerodynamic forces — Lift, Weight, Thrust, and Drag — shown as arrows on an aircraft model. Power and Attitude sliders drive a physics model; the arrows scale dynamically to reflect the force balance. Includes airspeed (ASI) and vertical speed (VSI) instrument gauges, airflow particle stream visualization, and weight-component decomposition during climbs. Supports cross-tab synchronization via BroadcastChannel for presenter/slide pairing.
Aircraft: Bristol F.2B (First World War) — public domain, Canadian Ingenium museum
Usage
import 'open-aviation-components'
<four-forces height="400px" model-path="/path/to/aircraft.glb"></four-forces>Attributes
| Attribute | Default | Description |
|---|---|---|
height |
400px |
CSS height of the component |
model-path |
/aircraft.glb |
URL to the GLTF aircraft model file. Must be served as a static asset. |
v_ne |
— | Never-exceed speed (kts). Sets ASI scale maximum and draws red radial line. |
v_no |
— | Normal operating speed (kts). Top of green arc, bottom of yellow arc. |
v_1 |
— | Stall speed clean (kts). Bottom of green arc. |
cruise-kts |
100 |
Airspeed at nominal cruise (speed=1.0). Calibrates the ASI needle to the aircraft's actual speed range. |
banking |
— | Boolean. When present, shows a bank angle slider beneath the attitude indicator. Banking tilts the lift vector and displays its vertical and horizontal components. |
Dependencies
Requires three (≥ 0.150) as a peer dependency. Install with:
npm install three