Hi everyone! I built CrankLab, a free interactive engine explorer using Three.js and React Three Fiber.
Try it: https://cranklab.mroy.dev/
You can explore inline, V, boxer, VR and W layouts, slow them down to follow the linkage, or use Auto rev to hear them sweep through the RPM range.
Some things to try:
- Inspect individual cylinders and scrub through the firing timeline.
- Adjust RPM and acoustic load to hear how the synthesized sound changes.
- Change firing orders or individual ignition angles.
- Compare two-stroke and four-stroke engines.
- Share a configuration through a link.
The system generates the mechanical parts procedurally based on engine specifications. Piston and connecting-rod motion uses the exact slider-crank equation, with a reusable simulation frame driving mesh transforms. They share geometry and materials, and they apply instancing to create the animated effects.
Web Audio and an AudioWorklet generate sound by using firing events, cylinder displacement, and estimated exhaust characteristics.
The presets use reference-specific bore and stroke dimensions, with simplified internals and estimated acoustic tuning. It’s an educational visualization rather than an OEM CAD model or a calibrated engine simulation.