cad-power-animations
Parametric build123d CAD models with mechanical-power animations, deployed as a static three.js viewer to GitHub Pages.
A website that shows animated 3D models of mechanical systems, like a car engine and bicycle drivetrain, so you can see exactly how power flows from one moving part to the next.
CAD Power Animations is a project that builds animated, interactive 3D models of mechanical systems and publishes them as a static website on GitHub Pages. The goal is to show how power physically travels through a real machine: which part moves first, which moves because of that, and so on. Two models are currently in the repository: a cut-away four-cylinder engine from an F1 race car (pistons to crank to drive shaft to differential to rear wheels), and a bicycle drivetrain (pedals to chainring to chain to rear cog to rear wheel).
The models are created in Python using a library called build123d, which lets you define 3D geometry with code and parameterize it. From the Python source, the workflow produces a STEP file (a standard CAD exchange format) and a GLB file (a 3D mesh format that web browsers can load). Each model also has a small JavaScript sidecar file that defines the animation: which parts move, how they move relative to each other, and at what rate. This sidecar file runs both in a local CAD viewer during development and in the public website.
The viewer itself is a hand-rolled three.js page at about 500 lines of code. It loads the GLB mesh, maps each physical part to a named group, and runs the animation sidecar every frame to apply transforms and colors based on the current time or parameter values. The landing page shows cards for each available model, and clicking one opens the viewer for that model.
Deployment is handled by a GitHub Actions workflow that copies the model files and site assets into a bundle and publishes it to GitHub Pages on every push to the main branch. Adding a new model requires writing a Python file that returns a labeled 3D compound, generating the STEP and GLB files, writing the animation sidecar, adding a thumbnail, and registering the model in the viewer config.
Where it fits
- Explore interactive 3D animations of a four-cylinder F1 engine or bicycle drivetrain to understand how mechanical power travels through each part.
- Add your own CAD model by writing a Python build123d file, generating a GLB, and creating an animation sidecar to show part movement.
- Use the project as a template for publishing interactive 3D mechanical visualizations as a static GitHub Pages site with no server required.
- Study the 500-line three.js viewer to learn how to load GLB files and animate named part groups in a web browser.