Quality Test

Prompt

Role: Act as a senior Three.js developer and 3D modeling engineer specializing in procedural aircraft visualization. Task: Generate a complete, self-contained HTML document that builds a highly detailed, photorealistic 3D model of an Airbus H145 helicopter using Three.js. The model must be constructed entirely from primitives and procedural geometry—no external model files. --- ## Technical Constraints & Stack - Use Three.js (r152 or later) loaded via ES modules from a CDN (unpkg or cdnjs). - Include OrbitControls for camera manipulation. - Use MeshPhysicalMaterial for all surfaces with appropriate clearcoat, roughness, metalness, and envMap intensity. - Generate a procedural environment map using PMREMGenerator with a generated scene or use a CubeTextureLoader with a fallback gradient. - All geometry must be constructed programmatically using Three.js primitives (BoxGeometry, CylinderGeometry, SphereGeometry, TorusGeometry, LatheGeometry, ExtrudeGeometry, ShapeGeometry). --- ## Aircraft Specifications (Real-World Proportions) Scale the model so 1 unit = 1 meter. | Measurement | Real Value | Three.js Scale | | :--- | :--- | :--- | | Overall Length | 13.55 m | 13.55 | | Fuselage Length | 10.20 m | 10.20 | | Height (to rotor top) | 4.65 m | 4.65 | | Rotor Diameter | 11.00 m | 11.00 | | Tail Rotor Diameter | 0.95 m | 0.95 | | Fuselage Width | 2.50 m | 2.50 | | Skid Width | 2.20 m | 2.20 | --- ## Fuselage & Body Construction ### Main Fuselage - Use LatheGeometry or a custom CurvePath with ExtrudeGeometry to create a smooth, aerodynamic teardrop shape. - The cross-section should transition from circular at the nose to oval at the cabin, then taper to a narrow tail boom. - Dimensions: Maximum width ~2.5m, maximum height ~2.2m. ### Cockpit Glass Bubble - A separate transparent geometry using LatheGeometry or a sphere section, positioned at the front. - Material: tinted glass with transmission, roughness, and envMap. - Include the distinctive H145 "step" in the windshield—a slight angle change near the pilot's eye line. ### Engine Cowlings - Two distinct humps on top of the fuselage, just behind the cockpit. - Shape: rounded rectangular boxes with smoothed edges. ### Tail Boom - Tapered rectangular cross-section extending from the rear of the cabin to the tail rotor. - Slight upward angle at the very end (dihedral). ### Horizontal Stabilizers - Two small wings on either side of the tail boom, near the fenestron. - Shape: NACA-style airfoil profile (can be approximated with a stretched rounded rectangle). - Size: ~1.5m span, ~0.5m chord. ### Vertical Fin - Small vertical stabilizer beneath the tail boom, just forward of the fenestron. --- ## Rotor Systems ### Main Rotor Assembly (5 Blades) - **Rotor Mast**: Cylinder extending from the top of the fuselage, ~0.15m diameter, ~0.8m height. - **Rotor Hub**: Complex assembly with: - Central hub cylinder (~0.4m diameter). - 5 blade attachment arms radiating outward. - Elastomeric bearings (small spheres/discs) at each attachment point. - **Blades (5)**: Each blade is ~5.5m long, ~0.35m chord, with: - Rectangular planform. - Subtle twist along the length (pitch change). - Slight droop when stationary (gravity simulation via offset rotation). - Each blade uses a BoxGeometry with tapered ends. ### Fenestron (Tail Rotor) - **Housing**: Cylindrical housing integrated into the tail boom, ~0.95m diameter, ~0.6m width. - **Rotor Blades (8-10)**: Small blades inside the housing, evenly spaced. - **Stator Vanes**: Fixed vanes to counter torque. - Use a combination of CylinderGeometry and repeated PlaneGeometry/BoxGeometry for blades. --- ## Landing Gear (Skids) - Two skid tubes running longitudinally under the fuselage. - Dimensions: ~4.0m long, ~0.08m diameter. - Cross-tubes connecting the skids to the fuselage (4 struts total: front-left, front-right, rear-left, rear-right). - Vertical struts: angled slightly outward. - Use CylinderGeometry with appropriate radii. --- ## Materials & Textures ### Paint Scheme (Factory White with Blue Accents) - **Primary Body**: MeshPhysicalMaterial with: - color: #F5F5F5 (white) - roughness: 0.3 - metalness: 0.0 - clearcoat: 1.0 - clearcoatRoughness: 0.1 - envMapIntensity: 1.2 - **Blue Accents**: MeshPhysicalMaterial with: - color: #0033A0 (Airbus corporate blue) - roughness: 0.3 - metalness: 0.1 - clearcoat: 0.8 - **Carbon Fiber Components** (if visible): MeshPhysicalMaterial with: - color: #2A2A2A - roughness: 0.4 - metalness: 0.3 - (Optional: use a canvas-generated texture for carbon weave pattern) ### Glass Canopy - MeshPhysicalMaterial with: - color: #88AAFF (blue tint) - roughness: 0.0 - metalness: 0.0 - transmission: 0.9 - thickness: 0.5 - envMapIntensity: 0.5 - opacity: 0.7 (for subtle visibility of interior) ### Rotor Blades - MeshPhysicalMaterial with: - color: #1A1A1A (dark composite) - roughness: 0.5 - metalness: 0.2 ### Fenestron Housing - MeshPhysicalMaterial with: - color: #C0C0C0 (silver metallic) - roughness: 0.2 - metalness: 0.8 ### Landing Gear - MeshPhysicalMaterial with: - color: #333333 (dark gray) - roughness: 0.6 - metalness: 0.4 --- ## Lighting & Environment ### Studio Setup - Create a softbox-style environment with: - A large ground plane (receive shadows) with a subtle gradient or grid pattern. - A curved backdrop (white or light gray) for clean reflections. - Lighting: - **Key Light**: DirectionalLight from upper-left, warm (5500K), intensity: 1.5. - **Fill Light**: HemisphereLight with sky/ground colors for ambient fill. - **Rim Light**: DirectionalLight from behind, cool (6500K), intensity: 0.8. ### Environment Map - Generate a procedural environment map using PMREMGenerator: - Create a simple scene with colored gradient background. - Or use a CubeTextureLoader with a fallback to a generated gradient. ### Shadows - Enable shadow mapping on the key directional light. - Ground plane should receive shadows. - Shadow map size: 2048x2048. --- ## Animation & Interactivity ### Rotor Animation - Main rotor: Continuous rotation around the Y-axis. - Fenestron: Faster rotation around the X-axis (tail rotor axis). - **Speed Control**: Add a UI slider to adjust rotor speed from 0% (stopped) to 100% (full speed). - **Blade Droop**: When stationary, blades droop under gravity. When rotating, centrifugal force lifts them to a flat position. - Implement via per-blade rotation offsets that interpolate based on speed. ### Camera Controls - OrbitControls with: - Damping enabled. - Min/max distance constraints. - Auto-rotate option (toggle). - Preset camera positions (buttons in UI): - Front View - Side View - Top View - Rotor Detail View - Fenestron Detail View ### Interactive UI Panel 1. **Rotor Speed Slider**: 0% to 100%. 2. **Auto-Rotate Toggle**: Enable/disable camera auto-rotation. 3. **Show Wireframe Toggle**: Debug helper. 4. **Color Swatches**: Switch between factory white/blue and alternate schemes (e.g., Red/White rescue, Matte Black). 5. **Reset Camera Button**. 6. **Play/Pause Animation Button**. --- ## Performance Optimization - Use **BufferGeometry.merge()** for static parts (fuselage, tail boom, stabilizers) to reduce draw calls. - Use **InstancedMesh** for rotor blades (5 instances with different rotations). - Use **Level of Detail (LOD)** for far/near views (optional, but recommended). - Limit polygon count: target ~50k-80k triangles total. - Use `renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))` to prevent performance issues on high-DPI screens. --- ## Code Quality & Output Format - Provide the full code inside a single ```html code block. - The code must be well-commented, clean, and immediately runnable. - Organize code into clear sections: - **Scene Setup** — scene, camera, renderer, lights, environment. - **Helicopter Construction** — fuselage, rotors, landing gear, details. - **Animation Loop** — rotor physics, camera controls, UI updates. - **UI Controls** — HTML panel, event listeners. - **Utilities** — helper functions for geometry creation. - Use a central `state` object to manage all configurable parameters. --- ## Expected Output Visual Quality The final output should look like a high-quality 3D product visualization—clean, well-lit, with realistic materials and smooth geometry. The helicopter should be recognizable as an H145, with: - The distinctive "stepped" cockpit windshield. - The 5-blade main rotor with visible articulation. - The fenestron tail rotor clearly visible. - Factory paint scheme with blue accents. - Realistic reflections on the glass and paint.

A system prompt was added to support web rendering