This POC proves you can present a complex, multi-part anatomical system as an interactive diagram inside a WordPress iframe: both wings, mirrored symmetry, discrete “parts,” and instant inspection feedback (hover → highlight → description).
Core mechanics
- Dual-wing model: One wing is generated procedurally, then mirrored to create the opposite wing so both sides stay consistent.
- Part-based hit testing: Each anatomical component is a separate selectable region (bones, joints, feather groups, control surfaces). Hovering runs a hit test and selects the topmost part under the cursor.
- Layer system: Feathers, bones/joints, airflow vectors, and labels can be toggled independently so the same scene can be read at different levels of detail.
- Posture + camber controls: Sliders change wing pose (fold → spread) and camber (flat → arched), updating geometry in real time.
- Viewport navigation: Drag-to-pan and wheel-to-zoom let you move from “whole bird” context to “wrist/alula” inspection without changing screens.
UI / display layout
- Left panel: “Layer toggles + pose controls + view reset + guided tour.” This keeps control inputs stable while the canvas stays uncluttered.
- Main canvas: The actual wing diagram. It renders the body centerline for orientation and two wings spaced symmetrically.
- Top HUD: The info panel shows the currently hovered part with category, function, and location; the legend clarifies major groups (primaries, secondaries, alula).
Interaction rules
- Hover: highlights the target and populates the info card.
- Drag: pans the world view (unlimited travel).
- Wheel: zooms in/out with a very wide range for macro-to-micro inspection.
- Reset view: returns to a known “camera” framing that shows both wings reliably.
- Guided tour: cycles through key parts to demonstrate discoverability and the info system without user hunting.
Why this matters
- It establishes a reusable pattern for “interactive anatomy/diagram pages” on your site: any complex system (machines, maps, weapon systems, biology, aircraft, etc.) can be represented as layered regions with consistent hover semantics and a stable inspection HUD.
- It’s robust: the implementation uses simple polygon + capsule geometry so the drawing doesn’t “disappear” due to fragile path logic.