Back to Main PageA browser-based 3D configurator for a playground equipment manufacturer. Customers lay out a play area on a to-scale plot, place real catalogue products in it, orbit the result in 3D, and watch a priced estimate build itself as they go.
This case study focuses on the delivery constraints, product choices, and workflow decisions that shaped the build.
In-browser 3D configurator
Three.js / WebGL
Priced plan, shareable link
Let a customer design their own playground before talking to a salesperson. Drag real catalogue products onto a plot, see the layout in 3D, and leave with a priced plan instead of a vague enquiry.
Real-time 3D in a browser tab, on ordinary office hardware, with a catalogue of physical products that each carry an article number and a price. The scene has to stay smooth while the estimate stays exact.
A configurator where placement, pricing, and the quote request are one continuous flow — plan the site, read the total, and send it to the plant without leaving the page.
Buying playground equipment normally means a PDF catalogue, a tape measure, and a sales call to find out whether six pieces actually fit the yard and what they add up to. Relief Plant wanted that conversation to start after the customer had already answered both questions themselves.
The result is a Three.js application that runs in an ordinary browser tab: build the site, place the equipment, orbit the scene, and read the price as it changes.
The centre of the screen is a live WebGL scene rendered with Three.js. The plot sits on a grid, equipment is placed onto it as real 3D models, and the whole layout can be orbited, panned, and zoomed with an on-screen gizmo or the mouse. A top view snaps the camera straight down for checking clearances and spacing.
Editing works the way people expect from a design tool rather than from a catalogue: select an object, duplicate it, delete it, undo and redo. Each placed item keeps a footprint outline on the ground so overlapping equipment and safety zones are visible at a glance instead of being discovered on site.
The left panel is the plant's actual product catalogue, not a set of generic shapes. Every entry is a manufactured item with its own 3D model, article number, and price — playground complexes, swings, seesaws, carousels, spring rockers, climbing routes. Search and category filters narrow a growing catalogue down to what fits the brief.
Because the models are the products, nothing has to be reconciled later. What the customer arranges on screen is what the plant can quote, build, and ship.
The right panel is a live bill of materials. Each placed object appears as a line with its thumbnail, name, article number, quantity, and price; quantities can be adjusted or lines removed directly from the panel, and the scene updates with them. The totals — item count and price — recalculate on every change.
That turns the configurator into a quoting tool rather than a toy. A customer who has spent ten minutes arranging equipment already knows what it costs, and the 'Get a quote' button sends that exact configuration to the plant instead of a description of it.
Before the equipment goes down, the site itself is defined: rectangular, round, or a free-form outline, with dimensions shown on the plan. Surfacing is applied to the plot so the visualisation matches what will actually be installed rather than showing equipment floating on an abstract plane.
Display controls for the grid, lighting, and object visibility let the same scene serve two purposes — a clean render to show a client, and a measured plan to work from.
Plans are saved as you work and can be reopened later — the configurator shows the save state rather than leaving people guessing. Each plan gets its own link, so a layout can be sent to a colleague, a client, or the plant's sales team and opened exactly as it was left.
A JPG export produces a flat image of the current view for proposals, print, and email, and a dedicated share action wraps the same plan for sending on.
The application is built around a real-time WebGL scene driven by Three.js, with the product catalogue, pricing, and saved plans behind it. The interface is a single continuous workspace: the 3D scene, the catalogue, and the estimate stay on screen together, so placing an object, seeing it, and pricing it are one action rather than three screens.
If you are scoping a marketplace, customer portal, or workflow-heavy MVP, start with the smallest transaction that proves the business works. Then estimate the cost, compare custom code against no-code, and decide which features belong in version one.
A catalogue answers what a product is. A configurator answers whether it fits, what it looks like in place, and what the combination costs — which is what actually blocks a purchase. Every question the customer answers themselves is one that no longer needs a sales call.
No. The scene is rendered with Three.js on top of WebGL, which every current desktop and mobile browser supports natively. The configurator opens from a link like any other page.
Because the 3D models in the scene are the catalogue items. Each placed object carries its own article number and price, so the estimate is assembled from the same records the plant quotes from rather than being maintained separately.
Yes. The pattern — a 3D scene, a catalogue of real products with real prices, a live estimate, and a shareable saved plan — transfers to furniture, modular buildings, equipment layout, and anything else sold as a configurable set. The starting point is an estimate of scope.
Book a free founder call. We'll help you figure out what to build first, what it'll cost, and how fast we can launch it.
Limited availability — email alex@shipkit.us or use the contact page to start the conversation.
