Home / Portfolio / Four-stroke engine · Interactive 3D course
Case study · 3D technical training
Four-stroke engine · Interactive 3D course
A technical course built on a 3D engine you can spin, cut open and take apart, with the final test answered by touching it.

- Format
- Web course built around an interactive 3D engine
- Content
- 14 lessons in 5 modules and a final test
- Stack
- Three.js, React Three Fiber, React, Vite
- Languages
- Spanish and English
- Services
- Instructional design, UX/UI design, WebGL engineering (Three.js), Shaders & animation, Copywriting
The idea
A complete course on how a four-stroke engine works, built around a 3D model that moves like the real thing. What we wanted to prove: that text and model can talk to each other. When the lesson says “connecting rod”, the rod lights up in the engine and a burgundy thread links the word to the part.
What you can do
- Spin and zoom into the engine with the mouse or your fingers.
- Switch between solid, cutaway and X-ray views, or explode it into parts.
- Hover the words in the text and see each part highlighted on the model.
- Answer the final test by touching the parts of the engine itself.
Who it's for
For companies training technicians, sales teams or customers on complex products: machinery, automotive, industrial equipment. People learn faster by seeing and touching than by reading a manual. You can try it in our Lab.



Related services
Want something like this for your brand?
Let's talk →More work
- Tabasco · 3D WebGL product websiteWeb · UX/UI · Food & beverage
- 3D padel court configurator3D configurator · Three.js · Sports · Manufacturing
- Domingueros · Wines and a live 3D map3D web · Packaging · Wine
- t' Gouden Mandeken · 3D website for a barWeb · Three.js · Hospitality
- St. Peter's Abbey (Ghent) · Food market proposalBranding · Project management · Hospitality & leisure