3D Configurator / 2025
Pergola Configurator
A 3D pergola configurator for Grill King. Customers set the span, finish, and side walls, preview the gazebo, and request a quote.
- Status
- Production
- Systems
- Three.js · Configuration Engine · Quote Workflow
- Stack
- Next.js · TypeScript · Three.js · React Three Fiber
Project screenshot · 2026-10-17
Overview
The pergola configurator is the Grill King design studio for a louvered gazebo. Span, finish, and side walls update the 3D preview, and the customer can request a quote for that design.
Scope
- 3D Product Configurators
- 3D Modeling & Animation
Challenge
A gazebo has to fit a slab and a finish. A product photo does not show the span, the louvres, or the side walls together.
Solution
A 3D configurator for the pergola. Customers set the layout, preview it, and send that design for a quote.
System
How this product is wired.
Flow
- 01
SPAN
- 02
FINISH
- 03
SIDE WALLS
- 04
QUOTE
Experience
- 01
3D gazebo with span, finish, and side-wall controls
- 02
Freestanding and wall-mounted layouts
- 03
A quote that carries the selected design
Features
- Real-time 3D
- Span and layout
- Finish and side walls
- Quote request
Implementation
- React Three Fiber scene for the louvered gazebo
- Configuration state for span, finish, and side walls
- Quote handoff of the selected design
Mobile
The pergola configurator works on a phone, with the preview and the option steps in one flow.
Outcome
- 01
Customers preview a gazebo at their span and finish before asking for a quote
- 02
The quote matches the design on screen