Build a complete, self-contained single-file 3D WebGL/Three.js application (`index.html`) for "BeeBot BC-9 / Autonomous Micro-Aerial Pollinator • Field Simulator". Generate all geometry 100% procedurally in Three.js using BufferGeometry, LatheGeometry, ExtrudeGeometry, and `THREE.InstancedMesh` (no external 3D models or textures).
### 1. AESTHETIC, COLORS & LIGHTING (NASA / Teenage Engineering Style)
- **Scene**: Warm lab off-white background (`#F4F2EB`), exponential fog (`0.012`), floor calibration grid (`y = -4.2`, `#D8D4C8` lines, `#FF5200` target ring), and 150 floating dust/pollen particles.
- **PBR Materials**:
- Ceramic Armor: Matte ivory (`#F1EFE8`, roughness `0.32`, metalness `0.08`, clearcoat `0.15`).
- Carbon Chassis: Dark graphite (`#222428`, roughness `0.45`, metalness `0.65`).
- Hydraulics/Joints: Brushed chrome (`#B8BDC2`, roughness `0.22`, metalness `0.88`).
- Accents: Aerospace Orange (`#FF5200`, emissive `#FF3B00`).
- Optics/Wings: Sapphire glass (`#0B131E`, transmission `0.85`, IOR `1.52`).
- Core/Coils: Anodized gold (`#D9822B`, roughness `0.25`, metalness `0.85`).
- **Lighting**: `ACESFilmicToneMapping` (exposure `1.12`), soft shadows (`2048x2048`), 4-point studio rig (Warm overhead key `#FFFDF9`, cool fill `#DCE8F5`, warm rim `#FFEAD5`, hemisphere bounce).
### 2. HUD & TELEMETRY OVERLAY (CSS Grid, Glassmorphic Cards `rgba(250,249,245,0.86)`, border `#E2DED3`, `'Inter'` & `'JetBrains Mono'`)
- **Top Header**: Orange brand block (`#FF5200`) with SVG bee icon + `BC-9`, title `BeeBot BC-9 /`, 28-segment `PHASE LOAD` bar + `2x14` orange dot matrix, and metadata (`SIM ID: 028-9914A`, live `RUNTIME`, `STATUS: ● NOMINAL`).
- **Left Column (3 Cards)**:
1. **WINGBEAT TELEMETRY**: `210 Hz` & `14.2 mN` readouts + live Canvas dual-wave oscilloscope (`#FF5200` & `#222428`).
2. **POWER**: `87%` 12-segment bar (`#FF5200` & `#16A34A`) + `DRAW: 9.4 W`, `CELL: 3.92 V`, `CORE: 31 °C`.
3. **6-LIMB KINEMATICS**: Live curl bars (`L1–L3`, `R1–R3`) synced to 3D leg joints.
- **Center Overlays**: 3D projected leader-line callouts + bottom-left giant orange mode readout (`HOVERING`, `NECTAR LOCK`, `EXPLODED TURNTABLE`, `EXITING FRAME`).
- **Right Column (4 Cards)**:
1. **ATTITUDE**: Circular pitch/roll horizon canvas + `ALT`, `SPEED`, `PITCH`, `ROLL`.
2. **ASSEMBLIES**: Camera focus buttons (`ALL`, `OPTICS`, `THORAX`, `LEGS`, `CORE`, `ABDOMEN`).
3. **DISPLAY**: Toggles (`LABELS`, `EXPLODED`, `VORTEX`, `TURNTABLE`) + jump buttons (`STILL 08.4s`, `0:16 EXPLODE`).
4. **SUBSYSTEMS**: 6 status rows (`01 OPTIC BARREL`, `02 THORAX SHELL`, `03 PIEZO CORE`, `04 LEG MATRIX`, `05 WINGS`, `06 STINGER LIDAR`) with live status pills.
- **Bottom Scrubber**: Play/Pause orange button, `0.0s–25.0s` range slider with keyframe ticks (`02.0s`, `04.5s`, `08.4s`, `16.0s`, `21.5s`).
### 3. PROCEDURAL 3D BEEBOT BC-9 ARCHITECTURE
- **Head & 196 Ommatidia**: Ceramic shell with micro-rivets (`InstancedMesh`), 3 ruby ocelli, dual 4-segment antennae, articulating mandibles, compound eye domes with 196 hexagonal facets (`InstancedMesh`), and lateral `#FF5200` macro lens barrels that unscrew outward.
- **Thorax, Wings & Piezo Core**: Gullwing ceramic thorax shells with orange chevrons that hinge open to reveal a rising, high-RPM golden/orange **Piezo Gyro & Pollen Centrifuge Core**. 4 carbon-veined translucent wings flapping at `210 Hz` (figure-8 pitch).
- **6-Tergite Abdomen & Stinger LiDAR**: 6 overlapping ceramic/orange armor rings (`T1–T6`) with breathing motion + telescopic chrome Stinger LiDAR needle.
- **6 Kinematic Legs (`L1–R3`)**: Coxa, hydraulic femur piston, ceramic tibia (with golden **Corbicula** pollen baskets on rear legs), and 3-link tarsus chain with micro-wheels and dual claws.
### 4. 25-SECOND CHOREOGRAPHY (`t = 0.0s` to `25.0s`)
- **`00.0s–02.0s`**: Hovering idle, leg wave propagation, live telemetry.
- **`02.0s–04.5s`**: Macro eye lens barrels unscrew/telescope out; mandibles open.
- **`04.5s–08.0s`**: Thorax shells and abdomen rings hinge open (`35°`); Piezo Gyro Core rises spinning.
- **`08.0s–12.0s`**: Shells lock; hits dramatic asymmetric hero pose (`NECTAR LOCK`) at `08.4s` with orange vortex rings.
- **`12.0s–16.0s`**: Synchronized leg curl inspection sweep.
- **`16.0s–21.5s`**: **330° Turntable Exploded View**—all shells, 196 eye facets, core, tergites, and leg links separate radially and reassemble cleanly before `21.5s`.
- **`21.5s–25.0s`**: Coils legs, boosts wings to overdrive, and flies out of the frame on its own.
Output one complete, runnable `index.html` file with OrbitControls, 60 FPS `InstancedMesh` updates, and no placeholders.
--------------------------------------------
Build a complete, self-contained, single-file interactive 3D WebGL/Three.js application (`index.html`) for a high-precision biomimetic robotics field simulator. Do not use any external 3D model files (.glb/.gltf/.obj) or external image textures—every single armor petal, optical lens, hydraulic piston, rivet, joint link, and wheel must be generated 100% procedurally in Three.js code using BufferGeometry, ExtrudeGeometry, LatheGeometry, TubeGeometry, and `THREE.InstancedMesh`.
The visual aesthetic, UI layout, lighting, and mechanical choreography must strictly follow this specification:
---
### 1. VISUAL AESTHETIC & COLOR PALETTE (NASA / Teenage Engineering / Braun Industrial Lab Style)
- **Scene Background & Studio Environment**:
- Warm laboratory alabaster/ivory off-white background (`#F4F2EB`) with subtle radial vignette and exponential studio fog (`#F4F2EB`, density `0.012`).
- **Calibration Floor Grid**: A subtle circular polar/hexagonal calibration reticle on the floor (`y = -4.2`) drawn procedurally with thin technical lines (`#D8D4C8`), degree tick marks, crosshair markers, and an orange target ring (`#FF5500`).
- **Floating Technical Dust/Plankton Particles**: 150 subtle floating micro-particles (`#C8C3B5` and `#FF5500`) drifting through the volume.
- **3D Material Palette (PBR `MeshStandardMaterial` & `MeshPhysicalMaterial`)**:
- **Primary Ceramic Armor Shell**: Matte warm off-white ceramic (`#F1EFE8`, roughness `0.32`, metalness `0.08`, clearcoat `0.15`).
- **Secondary Structural Carbon/Chassis**: Dark anodized graphite (`#222428`, roughness `0.45`, metalness `0.65`).
- **Hydraulic Pistons, Ball Joints & Fasteners**: Machined brushed titanium/chrome (`#B8BDC2`, roughness `0.22`, metalness `0.88`).
- **High-Visibility Safety/Diagnostic Accents**: International Aerospace Orange (`#FF5200`, roughness `0.25`, metalness `0.15`, plus emissive `#FF3B00` on active sensors).
- **Optical Lenses & Wing/Membrane Elements**: Deep sapphire/obsidian glass (`#0B131E`, roughness `0.05`, metalness `0.1`, transmission `0.85`, IOR `1.52`, clearcoat `1.0`).
- **Internal Core / Copper Coils**: Anodized gold/copper (`#D9822B`, roughness `0.25`, metalness `0.85`).
- **Typography & UI Colors**:
- Font stack: `'Inter', 'Space Grotesk', system-ui, sans-serif` for headers; `'JetBrains Mono', monospace` for all telemetry numbers, coordinates, and status badges.
- Card Surfaces: Translucent warm white (`rgba(250, 249, 245, 0.86)`) with `backdrop-filter: blur(12px)`, crisp `1px solid #E2DED3` borders, and subtle shadow `0 8px 24px rgba(20, 20, 18, 0.05)`.
- Text Colors: Primary Ink (`#18191B`), Secondary Muted Label (`#7A7870`), Accent Orange (`#FF5200`), Nominal Status Green (`#16A34A` on `#DCFCE7` pill background), Active Warning Orange (`#EA580C` on `#FFEDD5` pill background).
---
### 2. STUDIO LIGHTING & RENDER PIPELINE
- Use Three.js (r128 or ES Module via CDN) with `OrbitControls`.
- Enable `renderer.shadowMap.enabled = true` (`PCFSoftShadowMap`), `ACESFilmicToneMapping` (exposure `1.12`), and high-DPI pixel ratio (`Math.min(window.devicePixelRatio, 2)`).
- **4-Point Studio Rig**:
1. **Main Overhead Softbox (DirectionalLight)**: Warm white (`#FFFDF9`), intensity `2.2`, positioned at `(10, 18, 12)`, casting crisp 2048x2048 soft shadows.
2. **Cool Technical Fill Light (DirectionalLight)**: Cool sky tint (`#DCE8F5`), intensity `0.95`, positioned at `(-14, 6, -8)`.
3. **Warm Rim / Backlight (SpotLight)**: Crisp rim highlight (`#FFEAD5`), intensity `1.4`, positioned at `(0, 12, -16)`.
4. **Under-Chassis Bounce Light (HemisphereLight)**: Sky `#FFFFFF`, Ground `#E6E2D6`, intensity `0.75`.
---
### 3. COMPLETE HUD & TELEMETRY INTERFACE LAYOUT (CSS Grid Overlay, `pointer-events: none` on container, `auto` on controls)
Build the exact clinical field-simulator UI around the 3D viewport:
1. **Top Header Bar (Full Width, height `58px`, border-bottom `1px solid #E2DED3`)**:
- **Far Left Orange Brand Block (`#FF5200`, width `72px`)**: Minimalist white vector SVG icon of the robot + model code (`OC-8` or `BC-9`).
- **Title Lockup**: Micro-subtitle (`ROBOTIC BIOMIMETIC • SOFT-ARM / MICRO-AERIAL FIELD SIMULATOR`), main bold title (`Pelagos OC-8 /` or `BeeBot BC-9 /` with orange slash), and sub-caption.
- **Center Top Progress Matrix**: `PHASE LOAD` bar made of 28 discrete rectangular segments that fill dynamically from dark charcoal (`#222428`) to orange (`#FF5200`), plus a double-row dot matrix (`2 x 14` orange micro-dots) underneath.
- **Right Metadata Columns**: `SIM ID: 028-9914A`, `RUNTIME: 00:00.00` (live counter), `STATUS: ● NOMINAL / JETTING` (live green dot), `OPERATOR: FIELD • AUTO`.
2. **Left Column (3 Stacked Cards, width `270px`)**:
- **Card 1: THRUST / PROPULSION TELEMETRY**: Big numeric readout (`20 L/min` & `8 N` or `210 Hz` & `14.2 mN`), plus a **live HTML5 Canvas dual-wave oscilloscope** plotting primary thrust/wingbeat sine curve (solid orange `#FF5200`) vs secondary harmonic pressure (thin charcoal `#222428`), and footer metrics (`PULSE: 1.8 Hz`, `VORTEX: GOLD`).
- **Card 2: POWER & THERMAL**: `87% BATTERY` with a 12-segment battery bar (first 3 segments orange `#FF5200`, next 7 green `#16A34A`, last 2 gray), plus 3 bottom readouts (`DRAW: 9.4 W`, `CELL: 3.92 V`, `MOTOR: 31 °C`).
- **Card 3: 8-ARM / 6-LIMB KINEMATIC CURL BARS**: Individual horizontal progress bars (`A1`–`A8` or `L1`–`R3`) showing live bend percentage (`0%`–`100%`) updated every frame from the actual 3D bone angles, highlighting peak active limbs in `#FF5200`.
3. **Center Viewport Overlays**:
- Top-left and top-right technical watermarks (`MODEL OC-8 • REV D`, `ISOLATE • NONE`, and dynamic 3D callout labels attached to world-space coordinates via `vector.project(camera)`).
- Bottom-left **Large Operating Mode Readout**: Micro label `OPERATING MODE`, giant bold orange title (`JETTING`, `INSPECTING`, `UNFOLDING`, `EXPLODED TURNTABLE`, `EXITING FRAME`), and live phase description.
4. **Right Column (4 Stacked Cards, width `280px`)**:
- **Card 1: DEPTH / ATTITUDE & ARTIFICIAL HORIZON**: Circular pitch/roll gyroscope canvas widget on the left with a tilting orange horizon bar, paired with live numeric readouts (`ALT/DEPTH`, `RATE`, `PITCH`, `ROLL`, `HOLD`, `SPEED`).
- **Card 2: ASSEMBLIES (Interactive Camera & Sub-Assembly Focus Buttons)**: Toggle pills (`ALL`, `OPTICS`, `MANTLE / THORAX`, `ARMS / LEGS`, `SIPHON / CORE`, `REAR`) that smoothly tween the camera target and highlight the selected mechanical group.
- **Card 3: DISPLAY & QUICK-JUMP CONTROLS**: Toggle buttons for `LABELS` (3D floating leader-line callouts), `EXPLODED` (manual explode slider/toggle), `JET WAKE / VORTEX` (particle stream toggle), `TURNTABLE`, plus quick-jump buttons (`STILL 08.4s` and `0:16 EXPLODE`).
- **Card 4: SUBSYSTEMS STATUS LIST**: 6 numbered rows (`01 OPTIC TURRET`, `02 MANTLE SHELL`, `03 PUMP CORE`, `04 ARM MATRIX`, `05 SIPHON`, `06 REAR`) with live status pills (`UNFOLDED`, `CLOSED`, `SPINNING`, `202 LINKS`, `IDLE`, `NOMINAL`) that change color and text in sync with the 3D mechanical actions.
5. **Bottom Center Timeline Scrubber Bar (width `560px`)**:
- Play/Pause circular orange button (`#FF5200`), interactive range scrubber (`0.00s` to `25.00s`) with tick marks at key choreography timestamps (`02.0s`, `04.5s`, `08.4s`, `12.0s`, `16.0s`, `21.5s`), current phase label in orange (`00:08.4 • JET LEAP`), and loop/reset controls.
---
### 4. PROCEDURAL 3D ROBOT ARCHITECTURE (CHOOSE ONE OR SUPPORT SWITCHING)
*(Note: Construct the model with extreme mechanical density so it looks like an engineered flagship prototype, never like a simple primitive toy.)*
#### OPTION A: PELAGOS OC-8 (Robotic Subsea Octopus)
- **Segmented Mantle Dome (8 Hinged Ceramic Petals)**:
- Lathe/spherical segmented shell split into 8 radial petals around a dark structural endoskeleton frame.
- Every petal features recessed dark diagnostic cutouts containing bright orange rectangular sensor blocks (`#FF5200`), dark panel seam grooves, and **hundreds of procedural micro-rivets** placed along the seams using `THREE.InstancedMesh`.
- Top zenith circular hatch cap with rotational locking lugs.
- **Internal Spinning Axial Pump Core**:
- Hidden inside the mantle; when the 8 petals hinge outward, the multi-stage turbine core (`#FF5200` & `#D9822B` blades with chrome shaft and glowing telemetry rings) rises vertically while spinning at high RPM.
- **Dual Lateral Optic Turrets & Vectoring Siphon**:
- Protruding cylindrical camera housings on both sides of the head base with orange anodized retaining rings (`#FF5200`), multi-element sapphire glass lenses, and internal aperture blades that **physically unscrew and telescope outward** while rotating.
- Steerable ventral jet siphon nozzle that pulses and emits rings of orange/white vortex particles during propulsion.
- **8 Articulated Tentacle Arms (202 Links & 480 Sucker Wheels via `InstancedMesh`)**:
- 8 radial arms (`A1`–`A8`), each built from a kinematic chain of **25–26 segments** (`202 links` total across the octopus) and **60 paired micro-wheels/rollers** per arm (`480 wheels` total).
- Alternating white ceramic cylindrical armor cuffs (with orange longitudinal stripes and black seam rings) and exposed dual-piston chrome hydraulic truss links.
- Pose every arm every frame by walking its chain of bend quaternions/matrices (traveling sine wave + curl + spread + twist) and updating the `InstancedMesh` matrices in a single fast loop.
#### OPTION B: BEEBOT BC-9 (Autonomous Micro-Aerial Pollinator Bee)
- **Segmented Ceramic Head & 196-Lens Compound Eyes**:
- Sculpted white ceramic cranial shell with micro-rivets, 3 dorsal ruby ocelli sensors, dual 4-segment articulated antennae with orange tips, and motorized mechanical mandibles.
- Dual compound eye domes populated with **196 hexagonal sapphire ommatidia facets** via `THREE.InstancedMesh`, plus lateral macro optic barrels ringed in `#FF5200` that **unscrew and telescope outward**.
- **Hinged Thorax Shells, 4 Micro-Truss Wings & Rising Piezo Centrifuge Core**:
- Split left/right ceramic thorax shells (`#F1EFE8`) with orange warning chevrons and rivets that hinge open like gullwing doors.
- Inside sits a multi-ring **Piezo Gyro & Pollen Centrifuge Core** (`#FF5200` & gold `#D9822B`) that rises vertically out of the thorax while spinning rapidly.
- 4 high-frequency wings (2 forewings, 2 hindwings) with dark carbon-fiber venation frames and translucent iridescent membranes driven at `210 Hz` with figure-8 pitch reversal.
- **6-Tergite Articulated Abdomen & Telescopic Stinger LiDAR**:
- 6 overlapping curved ceramic-and-orange armor rings (`T1`–`T6`) that expand and contract with mechanical respiration and separate during inspection, ending in a chrome telescopic **Stinger LiDAR** needle emitter.
- **6 Multi-Jointed Kinematic Legs (Coxa, Femur, Tibia, 3-Link Tarsus + Golden Corbicula Pollen Baskets)**:
- 6 articulated legs (`L1`–`L3`, `R1`–`R3`) with hydraulic chrome femur pistons, white ceramic tibial guards, golden mesh pollen baskets on the rear legs, and 3-segment tarsus chains with micro-wheels and dual claws.
---
### 5. THE 25-SECOND CHOREOGRAPHED FILM TIMELINE
Drive the entire simulation from a master timeline clock `t` (`0.0s` to `25.0s`, looping smoothly or scrubbable manually):
- **`00.0s – 02.0s` [IDLE & DIAGNOSTIC BOOT]**: Gentle buoyant hover/breathing motion, rhythmic wave propagation through all limbs, telemetry waveforms active.
- **`02.0s – 04.5s` [OPTIC TURRET UNSCREW]**: Camera subtly eases in; the lateral optical lens barrels rotate and telescope outward (`unscrew` animation) while internal focus rings spin. Subsystem `01 OPTIC TURRET` flips to `UNFOLDED`.
- **`04.5s – 08.0s` [MANTLE / THORAX HINGES OPEN & PUMP CORE RISES SPINNING]**: The upper ceramic shell petals hinge open (`35°`), and the internal axial turbine / piezo core rises vertically out of the chassis while spinning at high speed. Subsystem `02` flips to `OPEN` and `03 PUMP CORE` to `RISING • RPM`.
- **`08.0s – 12.0s` [HERO POSE / JET LEAP AT `08.4s`]**: Petals lock back down; at `08.4s`, the robot hits the exact dramatic asymmetric hero posture from the reference still (`JETTING` / `NECTAR LOCK`) with sweeping arm/leg curves and active orange propulsion vortex rings.
- **`12.0s – 16.0s` [PRE-EXPLOSION COIL & CALIBRATION]**: All limbs perform a synchronized high-curl inspection sweep while the camera prepares for the turntable pass.
- **`16.0s – 21.5s` [330° TURNTABLE EXPLODED VIEW & REASSEMBLY]**:
- At `16.0s`, the entire robot smoothly blows apart radially along precision explosion vectors while rotating through a **330° turntable orbit**.
- Every individual petal, lens element, core turbine, abdomen ring, and all `202 arm links + 480 wheels` (or `196 eye facets + 6 leg chains`) separate in mid-air so the internal architecture is completely visible, then **reassemble with mechanical snap** right before the 330° turn ends at `21.5s`.
- **`21.5s – 25.0s` [AUTONOMOUS FRAME EXIT]**:
- The robot coils all limbs inward for launch, fires a maximum-impulse propulsion burst (with trailing orange/white wake rings), and **propels itself completely out of the camera frame on its own**, followed by a clean reset at `25.0s`.
---
### 6. CODE QUALITY & INTERACTIVITY REQUIREMENTS
- Output **one single, complete, runnable `index.html` file** containing all CSS, HTML HUD, and Three.js JavaScript. Do not use placeholders, `// TODO`, or truncated sections.
- Ensure 60 FPS performance by using `THREE.InstancedMesh` for repeated links, wheels, ommatidia facets, and rivets, updating `instanceMatrix` efficiently per frame.
- Allow the user to orbit/zoom with the mouse at any time, scrub the timeline slider, toggle 3D floating callout labels (`OPTIC TURRET`, `202 ARM LINKS`, `AXIAL PUMP CORE`, `480 SUCKER WHEELS`), trigger manual `EXPLODED` view, or click quick-jump buttons (`08.4s HERO STILL` and `16.0s TURNTABLE EXPLODE`).
