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.

Visit the site ↗

Four-stroke engine · Interactive 3D course
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.

Want something like this for your brand?

Let's talk →