Project breakdown / Studio demo
Interactive 3D equipment demo
Open the housing. Follow the mechanism. Check what you learned.
Masterwork Studio’s WebGL jet engine demo turns a turbofan model into an explorable browser experience. Visitors can reveal the interior, follow individual assemblies and control motion while reading a guided explanation.
Explore the live engine
- Project type
- Independent studio demonstration
- Format
- Interactive WebGL + written walkthrough
- Experience
- Seven tour stops / Six-question check
Make the inside understandable.
A machine’s exterior tells only part of its story. This project explores how a website can explain the relationship between components hidden inside a housing, while giving the visitor control over what they see.
The design pairs a 3D view with short explanations. The overview establishes the whole engine; guided stops then focus on the fan, compressors, combustor and turbines. A visitor can move through the explanation at their own pace and revisit a section before taking the quiz.
The walkthrough uses a turbofan to demonstrate the interaction design. A commissioned training module would need equipment-specific content and review from the client’s subject-matter experts.
What the interactive equipment demo lets you do.
Open the demo to try these controls. The overview and guided stages use different camera behavior so each view has a clear purpose.
Look around, then look inside
Orbit the engine in the overview to establish its shape. Turn on Cutaway to remove part of the outer housing and expose the assemblies. The guided stages open the housing automatically and frame the component being discussed.
Focus on one assembly
Select a guided stage and enable Isolate. Surrounding assemblies become subdued wireframes, keeping their spatial context while making the selected component easier to distinguish.
Control motion and airflow
Spin and Flow are separate switches. Pause the rotating parts, turn the airflow visualization off, or bring both back. These controls let a visitor choose which visual information to study at a given moment.
Check understanding
The six-question quiz provides a score and explanations after submission, with an option to try again. This connects the explanation to an action: choose an answer, receive feedback and revisit the relevant stage.
The model and the page work together.
Organize the parts around the interaction
The engine asset contains separately addressable assemblies. That structure lets the application distinguish the fan, compressors and turbines when changing visibility, motion and focus. A model’s organization matters as much as its appearance when individual parts need to respond.
Connect the explanation to the view
The page’s seven tour stops drive the 3D camera and selected assembly. The stage tracker follows the written section, and selecting a stop takes the visitor to its explanation. Text and model share the same progression.
Deliver the experience as a web page
Three.js renders the GLB engine asset through WebGL. The model loads when the demo opens; the written walkthrough is part of the page’s HTML. Desktop and touch layouts provide controls for their respective input methods. Browser and device requirements still need to be established for each commissioned project.
Where this approach can be useful.
A cutaway can help explain the components of a pump, gearbox or other enclosed product. A guided sequence can support a sales conversation by showing one mechanism at a time. Instructions and questions can extend an equipment viewer into a learning exercise.
The right interaction depends on the audience: a buyer comparing a mechanism needs different detail from a technician following a procedure.
For instructional work, the subject-matter expert’s review belongs in the project scope. Equipment-specific accuracy, assessment requirements and any connection to a learning system must be agreed separately.
What should people understand about your equipment?
Send a short description of the product, the audience and the parts or actions you want to explain. Include whether you have CAD, a 3D model or reference drawings, where the experience will appear, target devices and your deadline.
Discuss an equipment demo Masterwork Studio / Kennesaw, GeorgiaWorking remotely with clients across the United States.