Example usage: Steepy 3D weapon configurator with summary and price.
You launch a demo in a popup and go through the steps: base model, collimator, magazines, body color (black with GLB, pink, camouflage, carbon), and finally a summary with an estimated price. In the target deployment, the same scheme will be handled by three.js or another WebGL engine.
Instead of one long list of options, the user has a clear path – the salesperson gets a more „warmed-up” client with a specific set of choices.
Launch popup, go through the steps: collimator, magazines, body color (pink, burgundy, camouflage, mesh, etc.) and dynamic pricing.
You can see the selected options and an estimated final price. The last step is to contact us quickly.
Estimation
Leave your details, and we'll get back to you with an implementation proposal and technical scope.
In the sale of technical and modular products, the classic checkbox list quickly becomes insufficient. Customers want to see how the set's elements are arranged, what actually changes when an accessory is added, and approximately how much it costs – before they call a salesperson. A 3D configurator therefore combines three things at once: a visual experience, decision-making clarity, and a budget signal. On the company's side, it opens the door to analytics and better quality leads than a plain contact form.
The demo on this page is intentionally simplified, but it faithfully reproduces the production mechanics: we load the model GLB, the user selects the base variant, decides on the collimator and magazines, and in a separate step selects Body finish – black from the file, pink, camouflage, or carbon. At the end, a summary appears with a list of decisions and an estimated price. The same scheme of steps, 3D preview, and pricing can be successfully applied to spare parts, machines, tools, sports equipment, or any product whose „shape” is sold by image rather than just a table with SKUs.
On the technical layer, there is usually a browser and WebGL — in this example, a library in the style of three.js, This allows you to rotate the model, zoom in on details, and instantly switch the visibility of parts (e.g., the collimator or magazines) without reloading the page. For the user, this means an end to imagining things from a brochure: they see what's on the weapon and what's an add-on. For the sales team, it means less initial explanation – the client comes after their first „session” with the product and understands that the price increases with specific elements because they saw them on the model.
The step-by-step model has a hidden advantage here. Instead of one long form, the user goes through short stages: first the base, then accessories, then personalization of the look, and finally a summary. Psychologically, it's easier to maintain attention and lead the process to completion; analytically, it's easier to see at which step users drop off – and whether, for example, the color step is educational or already too burdensome. In production, compatibility rules are added: what cannot be combined, what is recommended for a given customer profile, what sets are bestsellers – the system can then not only display the model but also protect the salesperson from an unrealistic configuration.
While the model's rotation itself won't replace the bidding process yet, it can significantly shorten it. A live or final quote in the configurator organizes budget expectations before the first question about a discount is asked. A clear summary – a list of selected options understandable to a non-technical person – reduces transcription errors when transferring configurations to the CRM. In a full implementation, the natural next step is a contact form or a „send configuration” button that attaches a JSON file with selections to the Lead. This gives the salesperson context, and marketing can see which configurations actually result in an inquiry, not just a click on an ad.
Every step can be measured: option popularity, average time per stage, drop-offs, paths ending at the summary versus mid-process. This is data for product and UX decisions—not just „pretty charts,” but answers to questions like whether a step with color should come earlier or if the price should be less visible at the beginning. A well-written subpage with such a tool also supports SEO: it connects search intent (configurator X, online quote) with a real tool and content explaining what the user is doing—which improves traffic quality and makes it easier to close leads organically.
This example in the Playground is a skeleton: it shows what UX, 3D, and pricing can look like in one place. The target project includes, among other things, a design for a step-by-step path for your assortment, importing or connecting 3D models, business rules and validations, CRM/ERP integration, privacy policy and consent for sending configurations, as well as maintenance and updating of models for product changes. The sooner these areas are defined, the fewer „surprises” there will be regarding budget and schedule – regardless of whether the configurator is ultimately based on WordPress, a headless frontend, or a dedicated stack for a larger scale.
