--- title: "3D Product Configurator Demo: Try a Live Example — Dardo" description: "Try a 3D product configurator in your browser: change a shelf's size, wood and colour and watch the model, parts list and price update. Export to glTF or AR." url: "https://dardo.studio/en/tools/3d-product-configurator-demo/" language: "en" translations: {"es":"https://dardo.studio/es/herramientas/demo-configurador-3d/","pt":"https://dardo.studio/pt/ferramentas/demo-configurador-3d/"} updated: "2026-11-08T12:00:00Z" --- Free tools # 3D product configurator demo This is a working 3D product configurator, built by Dardo on a fictional modular shelf so we can show it in public. Choose the width, the height, the wood and the frame colour: the 3D model, the size, the parts list and a sample price change with every choice, and a link reopens exactly the shelf you built. By [Nicolas Ceron](https://dardo.studio/en/nicolas-ceron/) · Updated Nov 8, 2026 · 5 min read [Get a proposal](https://dardo.studio/en/contact/?service=3d-product-configurator) ![The demo shelf in 3D: two bays of natural oak shelves on a graphite steel frame, with four drawers on the bottom row](https://dardo.studio/work/product-configurator-poster.webp)3D view. Shelf 64 in (162 cm) wide and 47.5 in (121 cm) tall. Shelves: Natural oak. Frame: Graphite. Bottom row: Drawers. Drag to turn it, or use the arrow keys. Drag to turn it **Form fields** - 32.5 in82 cm · 1 bay - 64 in162 cm · 2 bays - 95.5 in242 cm · 3 bays - 127 in322 cm · 4 bays - 32.5 in83 cm · 3 shelves - 47.5 in121 cm · 4 shelves - 63 in160 cm · 5 shelves - 78 in198 cm · 6 shelves - Natural oak - Smoked oak - Walnut - Black ash - Graphite - Chalk white - Rust red - Sage - Cobalt - Open - Doors - Drawers ## Your shelf Overall size (W × H × D) 64 × 47.5 × 15 in (162 × 121 × 38 cm) Sample price $950 Configuration code SHELF-2X4-OAK-GRAPHITE-DRAWERS A fictional product with a fictional price list: it shows how a price can follow every choice. Your configurator would use your own prices, rules and stock. ### Parts list Steel posts 6 Depth rails 12 Shelves 8 Drawers 4 Floor glides 6 ### Want one for your product? Send this configuration with a few lines about what you sell and what your customers choose. We reply with how we'd build yours: the options and rules, the 3D models, where it connects to your store or quotes, and what it would cost. ## Key takeaways - One 3D model can show every version of a product: this shelf has 960. - The size, parts list and price come from the same rules that build the model, so they never contradict the picture. - The demo downloads no 3D files: the shelf is built from its measurements in the browser. - Everything works with a keyboard, with reduced motion and without the 3D view. - Each configuration exports as glTF (.glb) and, on Apple devices, as USDZ for AR. ## How to use the demo 1. Choose the size: four widths, from one to four bays, and four heights, from three to six shelves. 2. Choose the finishes: four woods for the shelves and fronts, five powder-coat colours for the steel frame, and open shelves, doors or drawers on the bottom row. 3. Turn it: drag the model, use the buttons under it, or focus it and use the arrow keys. Front, Angle and Side jump to set views. 4. Keep it: copy the link to reopen the same shelf, download the model as a .glb file, or, on an iPhone or iPad, view it in your room with AR Quick Look. 5. Send it: the last button takes your configuration to our contact form, where you add a few lines about your own product. ## What a configurator does for a buyer A configurator replaces a gallery of every possible product with one model that follows the buyer's choices. Here, 4 widths × 4 heights × 4 woods × 5 frame colours × 3 kinds of fronts make 960 versions of one shelf, none of them photographed or rendered ahead of time. - Rules: each choice changes the parts the shelf needs, so the model and the parts list always agree. - A parts list: the posts, rails, shelves and fronts that a quote or a factory order would carry. - A price that follows the choice: here from a fictional price list; in a real project, from your price book, your ERP or your CPQ. - A configuration code and a link, so a sales rep, a quote or a cart line can carry the exact configuration. ## How it's built The shelf isn't a downloaded 3D file. It's built in the browser from its own measurements: each post, rail, shelf and drawer front is a box placed by the same rules that count the parts and price them, so the picture and the parts list can't disagree. The wood grain is drawn in the browser too, so the 3D view downloads no models or textures. It runs on three.js and WebGL and draws a new frame only when something changes. For a real product we usually start from your CAD files or existing 3D models, convert them to glTF, the open format the Khronos Group maintains for 3D on the web, and compress geometry and textures for phones. The same model then exports to USDZ for Apple's AR Quick Look, as the shelf does here. ## Accessibility and performance budget - Every option is a standard form control, so the whole configurator works with a keyboard and a screen reader, and each change is announced. - Turning the model never requires a drag: the buttons and the arrow keys do the same, as WCAG 2.2's criterion on dragging movements asks. - With reduced motion turned on in your system, the camera jumps to each view instead of gliding. - The size, parts list and price are in the page's HTML and work without the 3D view. Without WebGL you see a still; with Save-Data on, the 3D view waits until you ask for it. - The 3D view's code, three.js included, is about 160 KB compressed and loads only once the view is on screen. The .glb and AR exporters add about 10 KB each, only when you use them. ## What this demo leaves out It's a demo, not a client project: the product, its prices and its code are invented, and nothing here was manufactured. A real configurator also needs what this one fakes: your product's real rules and exceptions, your price book, stock and lead times, and a connection to the cart, the quote or the order. That's the work our [3D product configurator service](https://dardo.studio/en/services/3d-product-configurator/) covers. ## Questions before you choose **Is the shelf a real product?** No. It's a fictional shelf Dardo designed for this demo, with invented prices and product codes, so we can show a working configurator in public without a client's product. The method is the one we'd use for a real catalogue: options, rules, a parts list and a price that follow every choice. **Can a configurator like this run on Shopify?** Yes. Shopify shows 3D models on product pages on every plan, and a custom configurator can add the chosen options to the cart line as line item properties, which reach the order. Those properties don't change the price, so options that do need a variant per price or, on Shopify Plus, a Cart Transform function. **What do you need from us to build one for our product?** The list of products and options, the rules between them, where the prices come from, and whatever 3D or CAD files, drawings, photos and material samples exist. A workshop turns that into an option and rule map before any modelling, and a first slice proves it on one product family. **Does a 3D configurator slow down a product page?** It shouldn't. Here the content and the options arrive in the HTML, the 3D code loads after them and only when the view is on screen, and the view draws only when something changes. A real product adds compressed models, so we agree a size budget per product and test on a phone before launch. **Can I see the shelf in my room?** On an iPhone or iPad, yes: the AR button turns your configuration into a USDZ file that AR Quick Look opens. Android's Scene Viewer opens glTF files from a web address, so a production configurator would generate and host the file for each configuration; this demo offers the .glb download instead. ## Sources & further reading Sources behind this page, with further detail from the original publishers. - [three.js documentation: GLTFExporter and USDZExporter](https://threejs.org/docs/pages/USDZExporter.html) · threejs.org - [Khronos: glTF, the royalty-free format for 3D scenes and models](https://www.khronos.org/gltf/) · khronos.org - [Apple Developer: Quick Look gallery (USDZ in AR)](https://developer.apple.com/quick-look-gallery/) · developer.apple.com - [Google ARCore: Scene Viewer for the web](https://developers.google.com/ar/develop/scene-viewer) · developers.google.com - [Shopify Dev: Cart API reference (line item properties)](https://shopify.dev/docs/api/ajax/reference/cart) · shopify.dev - [Shopify Dev: Cart Transform Function API](https://shopify.dev/docs/api/functions/latest/cart-transform) · shopify.dev - [W3C: Understanding WCAG 2.2, Success Criterion 2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html) · w3.org [Dardo](https://dardo.studio/) · [Free tools](https://dardo.studio/en/tools/) · Configurator demo ## From the demo to your configurator The demo shows the method. A real configurator starts with your product, your rules and where each order or quote has to go. [01 · **3D product configurators** · What we build, how and what it costs](https://dardo.studio/en/services/3d-product-configurator/) · [02 · **Interactive 3D websites** · 3D scenes that tell your story](https://dardo.studio/en/services/interactive-3d-websites/) · [03 · **Talk to Dardo** · Send your product and its options](https://dardo.studio/en/contact/?service=3d-product-configurator) ## Keep exploring. - [Service · **3D product configurators**](https://dardo.studio/en/services/3d-product-configurator/) - [Service · **Interactive 3D websites with Three.js and WebGL**](https://dardo.studio/en/services/interactive-3d-websites/) - [Service · **Web development for the US and Latin America**](https://dardo.studio/en/services/web-development/)