Full demo
Project overview
An interactive 3D product configurator for outdoor furniture, running on Outer’s own website. Visitors configure modular seating across three guided steps, switch between five fabric options, add tables and accessories, and explore the backyard scene from multiple camera views — with selections and pricing updating as they go.
What a 3D product configurator is
We design and build web-based 3D product configurators. Your buyers explore options, switch materials, and watch every choice update in a real-time 3D scene — right in the browser.
How buyers use it
- 01
Start from a base product and explore the available options step by step.
- 02
Switch materials and colors — the 3D product updates immediately.
- 03
Drag to rotate, and change camera views to inspect the product from every angle.
- 04
Review the final configuration, dimensions, and price before taking the next step.
What we built — in this project
- Three-step guided configuration: Outdoor Lounge → Coffee & Fire Tables → Rugs & Accessories
- Modular seating options, including 4-seater, 5-seater, and sectional arrangements
- Five fabric colors — Palisades Cream, Pacific Fog Gray, Deep Sea Navy, Dark Pebble Gray, Sandstone Gray — applied to the 3D scene in real time
- Drag-to-rotate 3D backyard scene with switchable camera views, including overview and dimensions
- Live summary of selections and pricing, with cart and checkout actions
How the experience works
- 01
Map your product
We structure your options, variants, and configuration rules.
- 02
Build the 3D scene
Your product is modeled and prepared for real-time rendering in the browser.
- 03
Design the interaction
Option selection, material switching, camera behavior, and the summary your buyer sees.
- 04
Deliver for the web
The configurator runs on your website, ready for your buyers to use.
What we can build for you
Product options
Sizes, modules, finishes, and combinations structured into a clear configuration flow.
Real-time 3D visualization
Materials and colors that update the moment a buyer selects them.
Interactive product exploration
Rotate, zoom, and guided camera views that replace static photo galleries.
Product configuration
Rule-based logic for complex, modular, or made-to-order products.
Digital product communication
Give your sales team and distributors one interactive link instead of a PDF catalog.
Web-based product experience
Configurators that run in the browser on your own website, no app install required.
Typical situations
- Automotive & aftermarket
- Furniture & home
- Lighting
- Jewelry & accessories
- Kitchen appliances
- Industrial equipment
Technical notes
Three.js / WebGL · React / Vue Islands · glTF / GLB pipeline · Tailwind CSS · Astro Static
Project fit & delivery
- Who this is for
- For product brands and manufacturers that offer configurable products with multiple options, materials, finishes, colors, or accessories.
- Typical project inputs
- Typical project inputs include product data, configuration rules, available options, material or finish information, product imagery, brand guidelines, and existing 3D assets when available.
- Integration
- INTR can build the configurator into an existing product experience or deliver it as a standalone web experience. For Shopify projects, the configurator can be integrated into the storefront or product-page experience, with the final implementation shaped by the site's theme and technical setup.
- Limitations
- Complex configuration logic, large product option sets, and highly detailed 3D scenes may require additional preparation, optimization, or custom development. Final runtime performance also depends on asset complexity, interaction logic, and target devices.
More ways we can help
Have a product in mind?
Tell us what needs to be explained, configured or experienced.
Reply within 1 business day · GMT+8