Trade Show Booth Builder
Design and visualize trade-show booth experiences in 3D and AR
An interactive 3D/AR environment for constructing trade-show booth scenes from a spatial asset catalog — compose, inspect, validate, and place booth layouts, including WebXR-based preview.
- Status
- Functional Prototype
- Category
- 3D / AR
- Year
- 2025
- Primary stack
- ReactTypeScriptThree.js
- Demo
- ENTER THE BUILD
Project visualization — a designed representation, not a literal screenshot
01Overview
What this is
An interactive 3D/AR environment for constructing trade-show booth scenes from a spatial asset catalog — compose, inspect, validate, and place booth layouts, including WebXR-based preview.
Explores
- 3D scene construction
- Asset catalog
- Spatial composition
- Inspector
- Templates
- WebXR
- AR placement
- Spatial validation
- Three.js
- React Three Fiber
02Explore the build
The demo and the build insight
The demo
External application
ENTER THE BUILD
The public booth builder build — 3D scene construction, catalog, and WebXR AR placement, live on Vercel.
ENTER THE BUILDBuild insight
- Current build
- Functional Prototype
- Architecture and features below are the real build.
- Demo
- External
- Launch control above opens the verified public build.
Build insight — real project data, not a live application.
The scene graph is the core abstraction: every catalog asset instantiates as a scene entry with spatial data. Validation runs over the assembled scene graph, which keeps inspectors, validation, and AR placement all operating on one source of truth.
03Problem · opportunity
What it sets out to solve
Booth concepts are usually sketched, estimated, and argued about in 2D. No one sees the space until it is already rented, built, and installed — which is exactly the wrong time to discover a layout does not work.
04Concept
The core idea
Let a booth be composed spatially before it is built: a 3D scene where components drop in from an asset catalog, get inspected and validated against floor constraints, and can be viewed in-place through AR before any physical commitment.
05What I built
What's actually in the code
A functional prototype: 3D scene construction, asset catalog, spatial composition, object inspector, templates, spatial validation, and WebXR AR placement are part of the current build. Front-facing requirements typically shine here — precise measurements depend on the physical site survey, which is a real-world step, not simulated.
Approach
Prototyping the scene construction layer in React Three Fiber over Three.js, with an asset catalog of booth components, an inspector for placement and properties, templates for fast starts, and spatial validation to catch conflicts early. WebXR/AR placement demonstrates the in-space experience.
06Key features
What's implemented today
- Interactive 3D composition of booth components
- Catalog of reusable booth assets with spatial properties
- Per-object inspector for position, rotation, and attributes
- Template scenes for common booth formats
- Spatial validation that flags overlaps and out-of-bound placement
- WebXR AR placement to preview the booth in a real space
07Architecture
How it's structured
The scene graph is the core abstraction: every catalog asset instantiates as a scene entry with spatial data. Validation runs over the assembled scene graph, which keeps inspectors, validation, and AR placement all operating on one source of truth.
Design notes
AR placement is a demonstration of positioning, not a measurement device. Dimensions in the prototype represent design intent and must be reconciled with a physical site survey.
08Technology
The stack
- React
- TypeScript
- Three.js
- React Three Fiber
- WebXR
09Challenges · lessons
Where it got hard, and what it taught me
Challenges
- Making spatial composition approachable for marketers, not just CAD users
- Keeping WebXR reliable across browsers while still being worth the complexity
- Defining validation rules that catch real problems without being pedantic
Learnings
- A single scene-graph abstraction simplifies every downstream feature
- Spatial validation is the honest version of a “design review” that spreadsheets cannot offer
- AR previews build confidence early — even rough ones do
10Current status
Where this project sits today
Core features are engineered and demonstrable. Not yet production-hardened or deployed to real users.
Demonstrated
- Functional prototype: scene construction, catalog, inspector, templates, and AR placement run today
11What comes next
Where this goes from here
- 01Expand the asset catalog and template library
- 02Harden spatial validation with realistic booth constraints
- 03Explore exportable layout specs for vendors