Interactive 3D training courses: how we built a technical course

In the Lab we built a full course on how a four-stroke engine works. It isn’t a video or a slide deck: it’s a 3D model that moves like a real engine, that you can spin, cut open and take apart, and a text that points at each part while it explains it. Open it before reading on: it makes more sense when you play with it. The demo is in Spanish.

What we wanted to test

Technical training usually keeps text and images apart: the manual on one side, the drawing on the other, and the learner jumps between them. We wanted to see if we could bring both together on one screen: when the lesson says “connecting rod”, the rod lights up on the engine and a thread links the word to the part.

The result is 14 lessons in 5 modules, with saved progress, and a final quiz where some answers are given by pointing at the part on the model.

What learners can do

• Spin and zoom with the mouse or with their fingers.
• See inside: cutaway mode opens the engine down the middle, and X-ray mode makes the casings transparent.
• Explode the engine to see how it goes together, part by part.
• Hover over the underlined words to find each part on the model.
• Tap a part to see its details, isolate it or jump to the lesson that explains it.

How it’s built

A model with parts that have names

Every part of the engine has its own name in the code: piston, connecting rod, crankshaft, exhaust valve… That name connects everything. A word in the text, a label on the model, the part’s details and a quiz question all point to the same place.

Movement driven by real physics

Nothing is hand-animated. From the crankshaft angle we calculate where the piston is, how far the rod tilts and when each valve opens. The camshafts turn at half speed, as in a real engine, and the combustion chamber changes colour in each stroke: fresh mixture, compression, combustion and exhaust gases.

The cutaway

Cutaway mode splits the engine with a plane in real time and draws the section with burgundy hatching, like a technical drawing. You see the piston inside the cylinder without losing track of the casing.

The thread

The line linking the text to the part is recalculated every frame: if you rotate the model, the thread follows it. On phones, where the text sits below the model, the part lights up with a pulse instead of a line crossing the screen.

What a company can use it for

The engine is the example. The system works the same with any product that has parts to explain:

• Product training for sales teams and distributors.
• Technical service: maintenance, assembly and spare parts, on the exact model.
• Onboarding for staff on the factory floor or in the lab.
• Technical sales: showing a customer why your product is built the way it is.