ChatGPT Version
Prompt:
Role: Expert Three.js Developer & Mechanical Engineer. Task: Create a single-file HTML application simulating a hyper-realistic Cross-Plane V8 Engine for educational purposes.
Core Mechanical Specs:
Configuration: 90° V8 layout.
Crankshaft: Cross-plane design with throws at 0°, 90°, 270°, 180°. Use complex ExtrudeGeometry for the crank webs (counterweights) to look like cast iron, not simple boxes.
Firing Order: GM Standard 1-8-4-3-6-5-7-2.
Bank Offset: The Right Cylinder Bank must be physically staggered (offset along Z-axis) by exactly one connecting rod width relative to the Left Bank so rods share crank pins side-by-side without clipping.
Visual Assets & Materials (PBR):
Pistons: High-poly CylinderGeometry with 3 visible chrome rings and a wrist pin hole. Material: Bright Aluminum (Roughness 0.3, Metalness 0.6).
Connecting Rods: H-Beam style, Forged Steel material (Metalness 0.8), detailed with big-end caps and bolts.
Cylinder Heads: Detailed circular aluminum heads with valve covers, spark plugs (ceramic metal), and 6-bolt patterns.
Cylinders: Transparent Glass (MeshPhysicalMaterial, transmission 0.98, opacity 0.12) constrained strictly between the cylinder head and the bottom of the stroke. Add a dark metal base ring at the bottom.
Combustion Gas: A dynamic cylinder mesh inside the glass that scales from the piston top to the cylinder head.
Lighting: High-contrast studio lighting. Use a DirectionalLight with high-res shadows (4096 map) to simulate sunlight, plus Rim lights and Fill lights.
Animation & Physics Logic (The Critical Part):
Kinematics: Use exact Slider-Crank formulas based on CrankRadius and RodLength to calculate Piston Y position.
Global Synchronization: Calculate a global CycleAngle (0°-720°) for each cylinder based on the global crank rotation, bank angle offset, and the specific Firing Order delay.
Valve Timing (Trapezoidal):
Intake Valve: Opens exactly at 0° (TDC), closes exactly at 180° (BDC). Use a steep opening curve (not a slow sine wave).
Exhaust Valve: Opens exactly at 540° (BDC), closes exactly at 720° (TDC).
Strict Separation: Ensure Intake and Exhaust never overlap visually.
4-Stroke Color Logic:
Intake (0-180): Transparent fading to Blue (Air filling).
Compression (180-360): Blue fading to Orange (Pressure building).
Power (360-540): Trigger bright White Flash (Bloom) at 360° (TDC), fading to Red and then Dark Red as piston descends.
Exhaust (540-720): Maintain the Dark Red/Grey color (do not clear it) and keep high opacity to show waste gas being pushed out.
Rendering & Post-Processing:
Use EffectComposer with UnrealBloomPass.
Bloom Settings: Threshold 0.8 (only fire glows), Strength 1.8, Radius 0.5.
Tone Mapping: ACESFilmicToneMapping with exposure 0.7 to prevent metal blowout while keeping the explosion bright.
UI & Architecture:
Library: Three.js (CDN).
Control Panel (lil-gui):
RPM Slider: Default to 50 RPM (Slow motion for education). Range 0-6000.
Exploded View: Slider to expand banks outward.
Opacity: Slider for cylinder glass.
Code Structure: Use ES6 Classes (Crankshaft, PistonAssembly, CylinderHead, EngineSimulation).
Constraint: Ensure the animation loop calculates dt correctly so physics are frame-rate independent.
Output: A single, runnable HTML file containing all CSS, JS, and logic. No external assets (textures/models) allowed; use procedural geometry.