Case study
Building a Real-Time 3D Car Inside Articulate Storyline
Storyline has no 3D engine. This is how a complete WebGL scene — one a learner can orbit, zoom and pull apart — runs inside an ordinary SCORM course, and why some subjects are not teachable any other way.
The challenge
Some things cannot be taught flat. A drivetrain, a pump's internals, a machine's service points — the learner needs to understand how the parts sit in relation to one another, and a labelled diagram has already made that decision on their behalf. It shows one angle, chosen by whoever drew it.
The standard eLearning workaround is a turntable: thirty-six photographs of the object rotating, cycled by a slider. It convinces for about four seconds. Then the learner wants to do something the photographer did not anticipate — look underneath, zoom into one corner, tilt to see how two parts meet — and it stops dead.
My analysis
A turntable is a recording of somebody else's exploration. The learner is watching a decision that was made for them, which is the same problem as a click-through course wearing a different costume.
Storyline has no 3D engine, but it can host a web object — and a web object is a browser. Anything a browser can render, a Storyline course can contain. That includes a full WebGL scene running at sixty frames a second, with the course still packaging as ordinary SCORM and the LMS none the wiser.
If the learner cannot choose the angle, it is a picture, not a model.
The solution
I built a complete Three.js scene — a car, lit with a real environment map, that the learner can orbit, zoom into and interrogate part by part — and embedded it in Storyline as a web object that reports back to the course.
Clicking a component opens its explanation. Storyline knows which parts have been examined, so the Next button unlocks on evidence of exploration rather than on a timer. Completion means the learner actually looked.
How it is built
Eight decisions between a 3D file and a teaching tool.
Most of the work is not getting a model on screen — that part takes an afternoon. It is everything that makes it survive a corporate laptop, report to an LMS, and teach something.
The model travels as glTF
glTF (or its binary form, .glb) is the format the web actually wants — geometry, materials and textures in one file, designed to be parsed rather than converted. Geometry gets Draco compression and textures go to KTX2/Basis, which together take a model from tens of megabytes to something a learner on hotel wifi will tolerate. Every mesh is named deliberately in the modelling tool, because those names are how the code addresses individual parts later.
Lighting is what makes it read as a car
A car lit with ordinary directional lights looks like a plastic toy. What tells your eye it is painted metal is reflection, so the scene is lit with an HDRI environment map processed through Three.js's PMREM generator. The bodywork uses a physical material with a clearcoat layer over the base colour, glass uses transmission rather than simple opacity, and the tyres are pushed to full roughness so they stop catching highlights they should not have.
Controls that feel weighted
A perspective camera with orbit controls, damping switched on so the model carries a little momentum instead of snapping. The polar angle is clamped so the learner cannot end up below the ground plane looking at nothing, and zoom is bounded at both ends so the car can be neither lost in the distance nor accidentally entered. Constraints here are not restrictions — they are what stops the learner getting disoriented and giving up.
Clickable parts, found by raycasting
A pointer position becomes normalised device coordinates, a ray is cast from the camera through that point, and whatever mesh it hits first comes back by name. That name looks up the component's explanation and opens its panel. This is the step where the scene stops being an impressive object and becomes instruction — the learner asks a question by pointing at the thing they are curious about.
Talking back to Storyline
The web object reaches the course through the parent window and Storyline's player API, setting a variable as each component is examined. A trigger on the Storyline side watches those variables and releases the Next button only once every part has been opened. The result is a completion rule built on what the learner explored rather than how long the slide was left open.
Surviving the machine it runs on
Corporate laptops are not gaming rigs, and a course that melts a fan gets closed. The device pixel ratio is capped so a high-DPI screen does not quadruple the pixels being shaded, the render loop pauses when the slide or tab is not visible instead of spinning in the background, and geometry is decimated to the lowest polygon count that still reads correctly at the sizes learners actually view it.
A path for when WebGL is not available
Some locked-down environments disable hardware acceleration outright. The scene feature-detects before it builds anything, and where WebGL is missing it falls back to the pre-rendered turntable with the same component explanations attached. Less good, but nobody is stopped from completing their training because of a group policy.
Making it usable without a mouse or without sight
A canvas is a single opaque element to a screen reader — whatever is happening inside it is invisible. So the orbit controls are also driven by the keyboard, focus moves through the components in a sensible order, and every explanation that appears in a 3D panel also exists as ordinary text in the course. The 3D is the better experience, not the only one.
Conclusion
The technique is not about cars. It is the same build for a pump, a circuit board, a piece of anatomy, or any product a salesperson needs to know from every side — anything where the relationship between parts is the thing being taught. What makes it work as training is not the rendering. It is that the learner chooses where to look, and the course can tell whether they looked.
Ready to turn complex content into practical learning?
Let’s discuss your audience, performance need, and the right format for the project.